ejRadialSlider

The RadialSlider provides an optimized interface for selecting a numeric value using a touch interface. Value is returned based on direct needle selection or needle move. It can also be customized as a full circle, half circle, or any portion of a circle, based on startAngle and endAngle

Syntax

  • js
  • $(element).ejRadialSlider()

    Example

  • html
  • <script>
        $("#radialSlider").ejRadialSlider();
        </script>
        <div id="radialSlider">
        </div>

    Requires

    • module:jQuery

    • module:ej.core

    • module:ej.touch

    • module:ej.radialslider

    Members

    autoOpen boolean

    To show the RadialSlider in initial render.

    Default Value:

    • false

    Example

  • html
  • // Set RadialSlider autoOpen on initialization. 
        //To set autoOpen API 
        <div id="radialSlider">
        </div>
        <script>
        $(function()
        {
        $("#radialSlider").ejRadialSlider({autoOpen:true});
        });
        </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:

    • ””

    Example

  • html
  • // Set RadialSlider cssClass on initialization. 
        //To set cssClass API 
        <div id="radialSlider">
        </div>
        <script>
        $(function()
        {
        $("#radialSlider").ejRadialSlider({cssClass:"custom-class"});
        });
        </script>

    enableAnimation boolean

    To enable Animation for Radial Slider.

    Default Value:

    • true

    Example

  • html
  • // Set Radialslider enableAnimation on initialization. 
        //To set enableAnimation API 
        <div id="radialSlider">
        </div>
        <script>
        $(function()
        {
        $("#radialSlider").ejRadialSlider({ enableAnimation:false });
        });
        </script>

    enableRoundOff boolean

    Enable/Disable the Roundoff property of RadialSlider

    Default Value:

    • true

    Example

  • html
  • // Set Radialslider enableRoundOff on initialization. 
        //To set enableRoundOff API 
        <div id="radialSlider">
        </div>
        <script>
        $(function()
        {
        $("#radialSlider").ejRadialSlider({ enableRoundOff :false });
        });
        </script>

    endAngle number

    Specifies the endAngle value for radial slider circle.

    Default Value:

    • 360

    Example

  • html
  • // Set Radialslider endAngle on initialization. 
        //To set endAngle API 
        <div id="radialSlider">
        </div>
        <script>
        $(function()
        {
        $("#radialSlider").ejRadialSlider({ endAngle:180 });
        });
        </script>

    inline boolean

    Specifies the inline for label show or not on given radius.

    Default Value:

    • false

    Example

  • html
  • // Set Radialslider inline on initialization. 
        //To set inline API 
        <div id="radialSlider">
        </div>
        <script>
        $(function(){
        $("#radialSlider").ejRadialSlider({ inline: true });
        });
        </script>

    innerCircleImageClass string

    Specifies innerCircleImageClass, using this property we can give images for center radial circle through CSS classes.

    Default Value:

    • null

    Example

  • html
  • // Set Radialslider innerCircleImageClass on initialization. 
        //To set innerCircleImageClass API 
        <div id="radialSlider">
        </div>
        <script>
        $(function()
        {
        $("#radialSlider").ejRadialSlider({ innerCircleImageClass:"slider" }); 
        });
        </script>

    innerCircleImageUrl string

    Specifies the file name of center circle icon

    Default Value:

    • null

    Example

  • html
  • // Set Radialslider innerCircleImageClass on initialization. 
        //To set innerCircleImageClass API 
        <div id="radialSlider">
        </div>
        <script>
        $(function()
        {
        $("#radialSlider").ejRadialSlider({ innerCircleImageUrl:"../images/radialslider/chevron-right.png" });
        });
        </script>

    labelSpace number

    Specifies the Space between the radial slider element and the label.

    Default Value:

    • 30

    Example

  • html
  • // Set Radialslider labelSpace on initialization. 
        //To set labelSpace API  
        <div id="radialSlider">
        </div>
        <script>
        $(function()
        {
        $("#radialSlider").ejRadialSlider({ labelSpace:100 });
        });
        </script>

    locale string

    Change the Radial Slider ticks value based on the given culture.

    Default Value

    • “en-US”

    Example

  • html
  • <div id="radialSlider">
        </div>
    
        $(function () {
           $("#radialSlider").ejRadialSlider({ 
               innerCircleImageUrl:"../images/radialslider/chevron-right.png",
               locale:"fr-FR"
           });
        });

    radius number

    Specifies the radius of radial slider

    Default Value:

    • 200

    Example

  • html
  • // Set Radialslider radius on initialization. 
        //To set radius API  
        <div id="radialSlider">
        </div>
        <script>
        $(function()
        {
        $("#radialSlider").ejRadialSlider({ radius:100 });
        });
        </script>

    showInnerCircle boolean

    To show the RadialSlider inner circle.

    Default Value:

    • true

    Example

  • html
  • // Set Radialslider showInnerCircle on initialization. 
        //To set showInnerCircle API 
        <div id="radialSlider">
        </div>
        <script>
        $(function()
        {
        $("#radialSlider").ejRadialSlider({ showInnerCircle:false });
        });
        </script>

    startAngle number

    Specifies the endAngle value for radial slider circle.

    Default Value:

    • 0

    Example

  • html
  • // Set Radialslider startAngle on initialization. 
        //To set startAngle API 
        <div id="radialSlider">
        </div>
        <script>
        $(function()
        {
        $("#radialSlider").ejRadialSlider({ startAngle:180 });
        });
        </script>

    strokeWidth number

    Specifies the strokeWidth for customize the needle, outer circle and inner circle.

    Default Value:

    • 2

    Example

  • html
  • // Set RadialSlider strokeWidth on initialization. 
        //To set strokeWidth API 
        <div id="radialSlider">
        </div>
        <script>
        $(function(){
        $("#radialSlider").ejRadialSlider({ strokeWidth:4 });
        });
        </script>

    ticks Array

    Specifies the ticks value of radial slider

    Example

  • html
  • // Set Radialslider ticks value on initialization. 
        //To set ticks API  
        <div id="radialSlider">
        </div>
        <script>
        $(function()
        {
        $("#radialSlider").ejRadialSlider({ ticks:[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100] });
        });
        </script>

    value number

    Specifies the value of radial slider

    Default Value:

    • 10

    Example

  • html
  • // Set Radialslider value on initialization. 
        //To set value API  
        <div id="radialSlider">
        </div>
        <script>
        $(function()
        {
        $("#radialSlider").ejRadialSlider({ value:40 });
        });
        </script>

    Methods

    show()

    To show the radialslider

    Example

  • html
  • <div id="radialSlider"></div>
     
        <script>
        var obj = $("#radialSlider").ejRadialSlider(); // render radial slider control
        obj.show(); // call the show method of Radial slider
        </script>

    hide()

    To hide the radialslider

    Example

  • html
  • <div id="radialSlider"></div>
     
        <script>
        var obj = $("#radialSlider").ejRadialSlider(); // render the radial slider control
        obj.hide(); // call the hide method of Radial slider
        </script>

    Events

    change

    Event triggers when the change occurs.

    Name Type Description
    model Object returns the Radialslider model
    cancel boolean if the event should be canceled; otherwise, false.
    oldValue number returns the initial value of Radial slider
    type string returns the name of the event
    value number returns the current value of the Radial slider

    Example

  • html
  • //Change event for Radialslider
     
        <div id="radialSlider"></div>
    
        <script>
        $("#radialSlider").ejRadialSlider ({
        change: function (args) 
        { 
        //handle the event
        }
        });         
        </script>

    create

    Event triggers when the radial slider is created.

    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

    Example

  • html
  • //Create event for Radialslider
    
        <div id="radialSlider"></div>
    
        <script>
        $("#radialSlider").ejRadialSlider ({
        create: function (args) 
        { 
        //handle the event
        }
        });         
        </script>

    mouseover

    Event triggers when the mouse pointer is dragged over the radial slider.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the Radialslider model
    selectedValue number returns the value selected
    type string returns the name of the event
    value number returns the current value selected in Radial slider

    Example

  • html
  • //mouseover event for Radialslider
    
        <div id="radialSlider"></div>
        <script>
        $("#radialSlider").ejRadialSlider ({
        mouseover: function (args) 
        { 
        //handle the event
        }
        });         
        </script>

    slide

    Event triggers when the Radial slider slides.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the Radialslider model
    selectedValue number returns the value selected in Radial slider
    type string returns the name of the event
    value number returns the currently selected value

    Example

  • html
  • //Slide event for Radialslider
    
        <div id="radialSlider"></div>
        
        <script>
        $("#radialSlider").ejRadialSlider ({
        slide: function (args) 
        { 
        //handle the event
        }
        });         
        </script>

    start

    Event triggers when the radial slider starts.

    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 current value selected in Radial slider

    Example

  • html
  • //Start event for Radialslider
    
        <div id="radialSlider"></div>
    
        <script>
        $("#radialSlider").ejRadialSlider ({
        start: function (args) 
        { 
        //handle the event
        }
        });         
        </script>

    stop

    Event triggers when the radial slider stops.

    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 current value selected in Radial slider

    Example

  • html
  • //Stop event for Radialslider
    
        <div id="radialSlider"></div>
    
        <script>
        $("#radialSlider").ejRadialSlider ({
        stop: function (args) 
        { 
        //handle the event
        }
        });         
        </script>