ejmRadialSlider

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>