Overview
A slider is a simple plug-in that sets a certain range of parameters.
Official Example Address: http://jqueryui.com/demos/slider/
• Parameters (parameter name: Parameter type: default name)
Animate:Boolean:false
Sets whether animation effects are performed when the slider is dragged.
Initial: $ ('. Selector '). Slider ({animate:true});
Get: var animate = $ ('. Selector '). Slider (' option ', ' animate ');
Set: $ ('. Selector '). Slider (' option ', ' animate ', true);
max:number:100
Sets the maximum value of the slider bar.
Initial: $ ('. Selector '). Slider ({max:7});
Get: var max = $ ('. Selector '). Slider (' option ', ' Max ');
Set: $ ('. Selector '). Slider (' option ', ' Max ', 7);
min:number:0
Sets the minimum value of the slider bar.
Initial: $ ('. Selector '). Slider ({min:-7});
Get: var min = $ ('. Selector '). Slider (' option ', ' min ');
Set: $ ('. Selector '). Slider (' option ', ' min ',-7);
orientation:string: ' Auto '
Typically, you do not need to set this option, and the program automatically recognizes that it can be set to: ' Horizontal ' or ' vertical ' if it is not properly identified.
Initial: $ ('. Selector '). Slider ({orientation: ' vertical '});
Get: var orientation = $ ('. Selector '). Slider (' option ', ' orientation ');
Set: $ ('. Selector '). Slider (' option ', ' orientation ', ' vertical ');
Range:boolean, String:false
If set to True, the slider automatically creates two sliders, one largest and one minimum, for setting a range of values.
Initial: $ ('. Selector '). Slider ({range: ' min '});
Get: var range = $ ('. Selector '). Slider (' option ', ' range ');
Set: $ ('. Selector '). Slider (' option ', ' Range ', ' min ');
step:number:1
Set the slider step size between the maximum and the minimum values, which must be split (Max-min) equally.
Initial: $ ('. Selector '). Slider ({step:5});
Get: var step = $ ('. Selector '). Slider (' option ', ' Step ');
Set: $ ('. Selector '). Slider (' option ', ' Step ', 5);
value:number:0
Sets the value of the initial slider, and sets the first slider if there are multiple sliders.
Initial: $ ('. Selector '). Slider ({value:37});
Get: var value = $ ('. Selector '). Slider (' option ', ' value ');
Set: $ ('. Selector '). Slider (' option ', ' value ', 37);
Values:Array:null
This property is used to set the initial value of the slider and is valid only if the range is set to true. (at least two slider values)
Initial: $ ('. Selector '). Slider ({values: [1,5,9]});
Get: var values = $ ('. Selector '). Slider (' option ', ' values ');
Set: $ ('. Selector '). Slider (' option ', ' values ', [1,5,9]);
• Events
Start:slidestart
This event is triggered when the slider begins to slide.
Initial: $ ('. Selector '). Slider ({start:function (event, UI) {...}});
Binding: $ ('. Selector '). Bind (' Slidestart ', function (event, UI) {...});
Slide:slide
This event is triggered when the slider slides. Use Ui.value to get the current value, or $ (..). Slider (' value ', index) Gets the value of the other slider.
Initial: $ ('. Selector '). Slider ({slide:function (event, UI) {...}});
Binding: $ ('. Selector '). Bind (' Slide ', function (event, UI) {...});
Change:slidechange
This event is triggered when the slider slides and the value changes. Event with two parameter event and UI, using Event.orginalevent to determine whether a keyboard or mouse or other trigger, get the current value with Ui.value, use $ (this). Slider (' Values ', index) to get the value of other sliders.
Initial: $ ('. Selector '). Slider ({change:function (event, UI) {...}});
Binding: $ ('. Selector '). Bind (' Slidechange ', function (event, UI) {...});
Stop:slidestop
This event is triggered when the slider stops sliding.
Initial: $ ('. Selector '). Slider ({stop:function (event, UI) {...}});
Binding: $ ('. Selector '). Bind (' Slidestop ', function (event, UI) {...});
• Properties
Destroy
Destroys the current slide bar object.
Usage:. Slider (' Destroy ')
Disable
Disables the current slider bar.
Usage:. Slider (' Disable ')
Enable
Enables the current slider bar.
Usage:. Slider (' Enable ')
option
Gets or sets the parameters of the current slider.
Usage:. Slider (' option ', Optionname, [value])
value
Gets or sets the value of the current slider.
Usage:. Slider (' value ', [value])
Values
Gets or sets the value of all the sliders for the current slider.
Usage:. Slider (' Values ', index, [value]) sample code
<! DOCTYPE html>