jquery Plug-in Series-Slider slider

Source: Internet
Author: User

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>  

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.