❮ Plugins Window Window Plugins Form Combo ❯

jQuery EasyUI Form Plugin - `Slider`

Override the default defaults with $.fn.slider.defaults.

The slider allows users to select a value from a limited range. As the slider control is moved along the track, a tooltip displaying the current value is shown. Users can customize the slider by setting its properties.

Dependencies

draggable

Usage

When used as a form field, create the slider from an <input> tag.

<input class="easyui-slider" value="12" style="width:300px"
    data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]">

Creating a slider from a <div> is also allowed, but the 'value' attribute is invalid.

<div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>

To create a vertical slider.

<div id="ss" style="height:200px"></div>

$('#ss').slider({
    mode: 'v',
    tipFormatter: function(value){
        return value + '%';
    }
});

Properties

Name	Type	Description	Default
width	number	The width of the slider.	auto
height	number	The height of the slider.	auto
mode	string	The type of the slider. Possible values: 'h' (horizontal), 'v' (vertical).	h
reversed	boolean	When set to true, it will swap the positions of the minimum and maximum values. Available since version 1.3.2.	false
showTip	boolean	Defines whether to show the value tooltip.	false
disabled	boolean	Defines whether to disable the slider.	false
value	number	The default value.	0
min	number	The allowed minimum value.	0
max	number	The allowed maximum value.	100
step	number	The value to increase or decrease by.	1
rule	array	Displays labels next to the slider, '	' - value shows a line.	[]
tipFormatter	function	A function to format the slider value. Returns a string value to be displayed in the tooltip.

Events

Name	Parameters	Description
onChange	newValue, oldValue	Triggered when the value of the text field changes.
onSlideStart	value	Triggered when starting to drag the slider.
onSlideEnd	value	Triggered when stopping the drag of the slider.
onComplete	value	Triggered when the value of the slider is changed by the user, either by dragging the slider or by clicking on it. Available since version 1.3.4.

Methods

Name	Parameter	Description
options	none	Returns the slider options.
destroy	none	Destroys the slider object.
resize	param	Sets the slider size. The 'param' parameter includes the following properties: <br>width: new slider width <br>height: new slider height
getValue	none	Gets the slider value.
setValue	value	Sets the slider value.
clear	none	Clears the slider value. Available since version 1.3.5.
reset	none	Resets the slider value. Available since version 1.3.5.
enable	none	Enables the slider component.
disable	none	Disables the slider component.