JavaScript API

ejSlider

11 Jul 201818 minutes to read

The Slider provides support to select a value from a particular range as well as selects a range value. The Slider has a sliding base on which the handles are moved. There are three types of Sliders such as default Slider, min-range Slider and range Slider.

Syntax

$(element).ejSlider()

Example

<div id="slider"> </div> 
 
<script> 
// Create Slider 
$('#slider').ejSlider(); 
</script>

Requires

module:jQuery
module:jquery.easing.1.3.js
module:ej.core.js
module:ej.slider.js
module:ej.button.js

Members

allowMouseWheel `boolean`

Specifies the allowMouseWheel of the slider.

Default Value

false

Example

<div id="slider"> </div> 
<script>
//To set allowMouseWheel API value during initialization  
$("#slider").ejSlider({ allowMouseWheel: true});
</script>

animationSpeed `number`

Specifies the animationSpeed of the slider.

Default Value

500

Example

<div id="slider"> </div> 
<script>
//To set animationSpeed API value during initialization  
$("#slider").ejSlider({ animationSpeed: 500});
</script>

cssClass `string`

Specify the CSS class to slider to achieve custom theme.

Default Value

””

Example

<div id="slider"> </div> 
<script>
//To set cssClass API value during initialization  
        $("#slider").ejSlider({ cssClass: "gradient-lime"});
</script>

enableAnimation `boolean`

Specifies the animation behavior of the slider.

Default Value

true

Example

<div id="slider"> </div> 
<script>
//To set enableAnimation API value during initialization  
        $("#slider").ejSlider({ enableAnimation: false});
</script>

enabled `boolean`

Specifies the state of the slider.

Default Value

true

Example

<div id="slider"> </div> 
<script>
//To set enabled API value during initialization  
        $("#slider").ejSlider({ enabled: false});
</script>

enablePersistence `boolean`

Specify the enablePersistence to slider to save current model value to browser cookies for state maintains

Default Value

false

Example

<div id="slider"> </div> 
<script>
//To set enablePersistence API value during initialization  
        $("#slider").ejSlider({ enablePersistence: false});
</script>

enableRTL `boolean`

Specifies the Right to Left Direction of the slider.

Default Value

false

Example

</br>
</br>
<div id="slider"> </div> 
<script>
//To set enableRTL API value during initialization  
        $("#slider").ejSlider({ enableRTL: false});
</script>

height `string`

Specifies the height of the slider.

Default Value

14

Example

<div id="slider"> </div> 
<script>
//To set height API value during initialization  
        $("#slider").ejSlider({ height: 14});
</script>

htmlAttributes `object`

Specifies the HTML Attributes of the ejSlider.

Default Value

{}

Example

<div id="slider"> </div> 
<script>
//To set htmlAttributes API value during initialization  
        $("#slider").ejSlider({ htmlAttributes: {disabled:"disabled"}});
</script>

incrementStep `number`

Specifies the incremental step value of the slider.

Default Value

1

Example

</br>
</br>
<div id="slider"> </div> 
<script>
//To set incrementStep API value during initialization  
        $("#slider").ejSlider({ incrementStep: 2});
</script>

largeStep `number`

Specifies the distance between two major (large) ticks from the scale of the slider.

Default Value

10

Example

</br>
</br>
<div id="slider"> </div> 
<script>
//To set largeStep API value during initialization  
        $("#slider").ejSlider({ largeStep: 2});
</script>

maxValue `number`

Specifies the ending value of the slider.

Default Value

100

Example

</br>
</br>
<div id="slider"> </div> 
<script>
//To set maxValue API value during initialization  
        $("#slider").ejSlider({ maxValue: 60});
</script>

minValue `number`

Specifies the starting value of the slider.

Default Value

0

Example

</br>
</br>
<div id="slider"> </div> 
<script>
//To set minValue API value during initialization  
        $("#slider").ejSlider({ minValue: 0});
</script>

orientation `enum`

Specifies the orientation of the slider.

Name	Description
Horizontal	Used to set horizontal organizational chart orientation
Vertical	Used to set vertical organizational chart orientation

Default Value

ej.orientation.Horizontal

Example

<div id="slider"> </div> 
<script>
//To set orientation API value during initialization
$("#slider").ejSlider({ orientation: ej.Orientation.Vertical});
</script>

readOnly `boolean`

Specifies the readOnly of the slider.

Default Value

false

Example

<div id="slider"> </div> 
<script>
//To set readOnly API value during initialization  
        $("#slider").ejSlider({ readOnly: true});
</script>

showButtons `boolean`

Shows/Hides the increment and decrement buttons of the slider.

Default Value

false

Example

<div id="slider"> </div> 
<script>
//To set showButtons API value during initialization
        $("#slider").ejSlider({ showButtons: true});
</script>

showRoundedCorner `boolean`

Specifies the rounded corner behavior for slider.

Default Value

false

Example

<div id="slider"> </div> 
<script>
//To set showRoundedCorner API value during initialization  
        $("#slider").ejSlider({ showRoundedCorner: true});
</script>

showScale `boolean`

Shows/Hide the major (large) and minor (small) ticks in the scale of the slider.

Default Value

false

Example

<div id="slider"> </div> 
<script>
//To set enabled API value during initialization
        $("#slider").ejSlider({ showScale: false});
</script>

showSmallTicks `boolean`

Specifies the small ticks from the scale of the slider.

Default Value

true

Example

<div id="slider"> </div> 
<script>
//To set showSmallTicks API value during initialization  
        $("#slider").ejSlider({ showSmallTicks: false});
</script>

showTooltip `boolean`

Specifies the showTooltip to shows the current Slider value, while moving the Slider handle or clicking on the slider handle of the slider.

Default Value

true

Example

<div id="slider"> </div> 
<script>
//To set showTooltip API value during initialization  
        $("#slider").ejSlider({ showTooltip: true});
</script>

sliderType `enum`

Specifies the sliderType of the slider.

Name	Description
Default	Shows default slider
MinRange	Shows minRange slider
Range	Shows Range slider

Default Value

ej.SliderType.Default

Example

<div id="slider"> </div> 
<script>
//To set sliderType API value during initialization
$("#slider").ejSlider({ sliderType: ej.SliderType.Default});
</script>

smallStep `number`

Specifies the distance between two minor (small) ticks from the scale of the slider.

Default Value

1

Example

<div id="slider"> </div> 
<script>
//To set smallStep API value during initialization  
        $("#slider").ejSlider({ smallStep: 2});
</script>

value `number`

Specifies the value of the slider. But it’s not applicable for range slider. To range slider we can use values property.

Default Value

0

Example

<div id="slider"> </div> 
<script>
//To set value API  during initialization
        $("#slider").ejSlider({ value: 60});
</script>

values `array`

Specifies the values of the range slider. But it’s not applicable for default and minRange sliders. we can use value property for default and minRange sliders.

Default Value

[minValue,maxValue]

Example

<div id="slider"> </div> 
<script>
//To set values API during initialization
        $("#slider").ejSlider({ values: [30,60]});
</script>

width `string`

Specifies the width of the slider.

Default Value

100%

Example

<div id="slider"> </div> 
<script>
//To set width API value during initialization
        $("#slider").ejSlider({ width: "300px"});
</script>

Methods

disable()

To disable the slider

Example

<div id="slider"> </div> 
 
<script>
$("#slider").ejSlider();
// Create slider control object
var sliderObj = $("#slider").data("ejSlider");
sliderObj.disable(); // disable the slider control
</script>

<div id="slider"> </div> 
 
<script>
$("#slider").ejSlider();
// disable the slider control
$("#slider").ejSlider("disable");
</script>

enable()

To enable the slider

Example

<div id="slider"> </div> 
 
<script>
$("#slider").ejSlider();
// Create slider control object
var sliderObj = $("#slider").data("ejSlider");
sliderObj.enable(); // enable the slider control
</script>

<div id="slider"> </div> 
 
<script>
$("#slider").ejSlider();
// enable the slider control
$("#slider").ejSlider("enable");
</script>

getValue()

To get value from slider handle

Returns:

number

Example

<div id="slider"> </div> 
<script>
$("#slider").ejSlider();
// Create slider control object
var sliderObj = $("#slider").data("ejSlider");
sliderObj.getValue(); // get value from the slider handle
</script>

<div id="slider"> </div> 
 
<script>
$("#slider").ejSlider();
// get value from slider handle
$("#slider").ejSlider("getValue");
</script>

setValue(value ,[enableAnimation])

To set value to slider handle.By default animation is false while set the value. If you want to enable the animation, pass the enableAnimation as true to this method.

Example

<div id="slider"> </div> 
<script>
$("#slider").ejSlider();
// Create slider control object
var sliderObj = $("#slider").data("ejSlider");
sliderObj.setValue(10); // set value to the slider handle
</script>

<div id="slider"> </div> 
<script>
$("#slider").ejSlider();
// Create slider control object
var sliderObj = $("#slider").data("ejSlider");
sliderObj.setValue(30, true); // enable the slider animation 
</script>

<div id="slider"> </div> 
 
<script>
$("#slider").ejSlider();
// set value to slider handle
$("#slider").ejSlider("setValue",10);
</script>

Events

change

Fires once Slider control value is changed successfully.

Name

Type

Description

argument

Object

Event parameters from slider control

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
sliderIndex	number	returns current handle number or index
id	string	returns slider id.
model	object	returns the slider model.
type	string	returns the name of the event.
value	number	returns the slider value.
isInteraction	boolean	returns true if event triggered by interaction else returns false.

Example

<div id="slider"> </div> 
<script>
//change event for slider control
$("#slider").ejSlider({
   change: function (args) {}
});
</script>

create

Fires once Slider control has been created successfully.

Name

Type

Description

argument

Object

Event parameters from slider control

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the slider model
type	string	returns the name of the event

Example

<div id="slider"> </div> 
<script>
//create event for slider control
$("#slider").ejSlider({
   create: function (args) {}
});
</script>

destroy

Fires when Slider control has been destroyed successfully.

Name

Type

Description

argument

Object

Event parameters from slider control

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the slider model
type	string	returns the name of the event

Example

<div id="slider"> </div> 
<script>
//destroy event for slider control
$("#slider").ejSlider({
   destroy: function (args) {}
});
</script>

renderingTicks

Fires before creating each slider scale tick. You can use this event to add custom text in tick values.

Name

Type

Description

argument

Object

Event parameters from slider control

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
value	number	returns slider tick value
valueType	string	returns the value type either tooltip or label value
tick	object	returns the current Li element

Example

<div id="slider"> </div> 
<script>
// renderingTicks for slider
$("#slider").ejSlider({
   showScale : true,
   renderingTicks: function (args) {
           args.value = "$" + args.value;           
   }
});
</script>

slide

Fires once Slider control is sliding successfully.

Name

Type

Description

argument

Object

Event parameters from slider control

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
sliderIndex	number	returns current handle number or index
id	string	returns slider id
model	object	returns the slider model
type	string	returns the name of the event
value	number	returns the slider value

Example

<div id="slider"> </div> 
<script>
//slide event for slider control
$("#slider").ejSlider({
   slide: function (args) {}
});
</script>

start

Fires once Slider control is started successfully.

Name

Type

Description

argument

Object

Event parameters from slider control

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
sliderIndex	number	returns current handle number or index
id	string	returns slider id
model	object	returns the slider model
type	string	returns the name of the event
value	number	returns the slider value

Example

<div id="slider"> </div> 
<script>
//start event for slider control
$("#slider").ejSlider({
   start: function (args) {}
});
</script>

stop

Fires when Slider control is stopped successfully.

Name

Type

Description

argument

Object

Event parameters from slider control

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
sliderIndex	number	returns current handle number or index
id	string	returns slider id
model	object	returns the slider model
type	string	returns the name of the event
value	number	returns the slider value

Example

<div id="slider"> </div> 
<script>
//stop event for slider control
$("#slider").ejSlider({
   stop: function (args) {}
});
</script>

tooltipChange

Fires when display the custom tooltip.

Name

Type

Description

argument

Object

Event parameters from slider control

Name	Type	Description
cancel	boolean	returns the cancel option value.
id	string	returns slider id.
isInteraction	boolean	returns true if event triggered by interaction else returns false.
model	object	returns the slider model.
sliderIndex	number	returns current handle number or index
type	string	returns the name of the event.
value	number	returns the slider value.

Example

<div id="slider"> </div> 
<script>
//tooltipChange event for slider control
$("#slider").ejSlider({
   tooltipChange: function (args) {}
});
</script>