ejRadialSlider

11 Jul 201815 minutes to read

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>