ejmRadialSlider

5 Jun 202324 minutes to read

Essential JavaScript Mobile RadialSlider control provides support to select a value from a particular range of values aligned in circular diagrammatic manner. The Range Slider has a needle to select the value and it is fixed with a base circle.

Custom Design for HTML RadialSlider control.

$(element).ejmRadialSlider()

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider"></div>
    
    <script>
        $("#defaultradialslider").ejmRadialSlider();
    </script>

Requires

• module:jQuery

• module:ej.core

• module:ej.unobtrusive

• module:ej.mobile.core

• module:ej.data

• module:ej.touch

Members

autoOpen boolean

Specifies whether the radialslider control will be opened initially or not.

NOTE

If autoOpen property set as false, you need to handle radial slider open manually.

Default Value

• true

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
        <br />
        <p>
            Click the button to open RadialSlider
        </p>
        <button id="targetButton" data-role="ejmbutton" data-ej-touchend="radialslideropen" data-ej-text="Open"></button>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-autoopen="false"></div>

    <script>
        function radialslideropen(args) {
            $("#defaultradialslider").ejmRadialSlider("show");
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
        <br />
        <p>
            Click the button to open RadialSlider
        </p>
        <button id="targetButton" data-role="ejmbutton" data-ej-touchend="radialslideropen" data-ej-text="Open"></button>
    </div>
    <div id="defaultradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider({ autoOpen: false });
        function radialslideropen(args) {
            $("#defaultradialslider").ejmRadialSlider("show");
        }
    </script>

cssClass string

Sets the root class for RadialSlider theme. This cssClass API helps to use custom skinning option for RadialSlider control. By defining the root class using this API, we need to include this root class in CSS.

Default Value

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-cssclass="customclass"></div>

    <style>
        .customclass .e-m-ticks-text {
            fill: red !important;
        }
    </style>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider({ cssClass: "customclass" });
    </script>

    <style>
        .customclass .e-m-ticks-text {
            fill: red !important;
        }
    </style>

enableAnimation boolean

To enable Animation for RadialSlider control.

Default Value

• true

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
        <br />
        <p>
            Click the button to open RadialSlider
        </p>
        <button id="targetButton" data-role="ejmbutton" data-ej-touchend="radialslideropen" data-ej-text="Open"></button>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-autoopen="false" data-ej-enableanimation="false"></div>

    <script>
        function radialslideropen(args) {
            $("#defaultradialslider").ejmRadialSlider("show");
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
        <br />
        <p>
            Click the button to open RadialSlider
        </p>
        <button id="targetButton" data-role="ejmbutton" data-ej-touchend="radialslideropen" data-ej-text="Open"></button>
    </div>
    <div id="defaultradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider({ autoOpen: false, enableAnimation: false });
        function radialslideropen(args) {
            $("#defaultradialslider").ejmRadialSlider("show");
        }
    </script>

enableRoundOff boolean

Specifies the result value should be whole number or with decimals for the RadialSlider control.

Default Value

• true

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-enableroundoff="false"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider({ enableRoundOff: false });
    </script>

labelSpace number

Specifies the space between stroke and values in RadialSlider control.

Default Value

• 30

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-labelspace="50"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider({ labelSpace: 50 });
    </script>

position enum

Changes the Position of the control. See RadialSliderPosition

Default Value

• “rightcenter”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-position="bottomleft"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider({ position: "bottomleft" });
    </script>

radius number

Specifies the radius of the RadialSlider control.

Default Value

• 200

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-radius="150"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider({ radius: 150 });
    </script>

renderMode enum

Changes the rendering mode. See RenderMode

Default Value

• “auto”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-rendermode="android"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider({ renderMode: "windows" });
    </script>

strokeWidth number

Specifies the radius of the RadialSlider control.

Default Value

• If windows or flat rendering mode, then the value is 12, otherwise 5

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-strokeWidth ="2"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider({strokeWidth :2});
    </script>

ticks numberarray

Specifies the increment steps of RadialSlider control.

Default Value

• [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-ticks="[0, 25, 50, 75, 100]"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider({ ticks: [0, 25, 50, 75, 100] });
    </script>

value number

Specifies the value of the RadialSlider control need to be set initially.

Default Value

• 10

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-value="0"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider();
    </script>

Methods

hide()

To hide the RadialSlider. You can’t access RadialSlider after this method called.

Example

HTML

<div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
        <br />
        <p>
            Click the button to hide RadialSlider
        </p>
        <button id="targetButton" data-role="ejmbutton" data-ej-touchend="radialsliderclose" data-ej-text="Hide"></button>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-autoopen="true"></div>

    <script>
        function radialsliderclose(args) {
            $("#defaultradialslider").ejmRadialSlider("hide");
        }
    </script>

show()

To Show the RadialSlider

Example

HTML

<div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
        <br />
        <p>
            Click the button to show RadialSlider
        </p>
        <button id="targetButton" data-role="ejmbutton" data-ej-touchend="radialslideropen" data-ej-text="Show"></button>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-autoopen="false"></div>

    <script>
        function radialslideropen(args) {
            $("#defaultradialslider").ejmRadialSlider("show");
        }
    </script>

Events

change

Event triggers while a value changed to new value in RadialSlider.

Name	Type	Description
argument	Object	Event parameters from Radialslider Name Type Description cancel boolean if the event should be canceled; otherwise, false. model Object Returns the Radialslider model type string Returns the name of the event oldValue number Returns the previous value of RadialSlider value number Returns the currently selected value

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-change="change"></div>

    <script>
        function change(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider({ change: "change" });
        function change(args) {
            //handle the event
        }
    </script>

slide

Event triggers while user slide the RadialSlider to change the value.

Name	Type	Description
argument	Object	Event parameters from RadialSlider Name Type Description cancel boolean if the event should be canceled; otherwise, false. model Object Returns the RadialSlider model type string Returns the name of the event selectedValue number Returns the previous selected value of RadialSlider value number Returns the current value where the cursor in.

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-slide="slide"></div>

    <script>
        function slide(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider({ slide: "slide" });
        function slide(args) {
            //handle the event
        }
    </script>

start

Event triggers while user start sliding to change new value in RadialSlider.

Name	Type	Description
argument	Object	Event parameters from RadialSlider Name Type Description cancel boolean if the event should be canceled; otherwise, false. model Object Returns the RadialSlider model type string Returns the name of the event value number Returns the currently value before slide

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-start="start"></div>

    <script>
        function start(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider({ start: "start" });
        function start(args) {
            //handle the event
        }
    </script>

stop

Event triggers while user stopped sliding to change new value in RadialSlider.

Name	Type	Description
argument	Object	Event parameters from RadialSlider Name Type Description cancel boolean if the event should be canceled; otherwise, false. model Object Returns the RadialSlider model type string Returns the name of the event value number Returns the currently selected value after slide stop

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider" data-role="ejmradialslider" data-ej-change="change"></div>

    <script>
        function change(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div>
        <br />
        <p>
            Syncfusion is the enterprise technology partner of choice for Windows development
        </p>
    </div>
    <div id="defaultradialslider"></div>

    <script>
        $("#defaultradialslider").ejmRadialSlider({ stop: "stop" });
        function stop(args) {
            //handle the event
        }
    </script>