jQuery UI - Sliders
Basic sliders Basic jQuery UI sliders
Basic slider example
Example of basic jQuery UI slider
Values range slider
Use range: true to show ranges
Animated slider
Use animate: true to animate slider
Custom start value
Set start value using value option
Fixed minimum range
Set min value with range: 'min' option
Slider methods
Snap to increments
Increment values with the step option
Fixed maximum range
Set max value with range: 'max' option
Disabled slider
Use disabled: true to disable slider
Advanced sliders Advanced jQuery UI sliders
Slider with pips
Using .slider("pips") method
Display handle tooltip
Using .slider("float") method
Display months
Custom output: You selected
Display labels with pips
Using rest: 'label' option
Hide rest of the points
Hide pips using rest: false option
Label localization
Display non-roman numbers/letters
Display pips only
Add 'pips' to the first/last points
Display prefix and suffix
Using prefix and suffix options
Display pips and float
Using both pips and float methods
Vertical sliders Vertical slider orientation
Basic vertical sliders
Using orientation: 'vertical' option
Vertical slider with pips
Using .slider("pips") method
Sizes. Default handle
Using ui-slider-lg (sm, xs) classes
Range with fixed minimum
Set min value with range: 'min' option
Vertical slider with labels
Using rest: 'label' option
Sizes. Solid handle
Using ui-slider-solid class
Range with fixed maximum
Set max value with range: 'max' option
With handle tooltips
Using both float and pips methods
Sizes. White handle
Using ui-handle-white class
Slider colors jQuery UI contextual slider colors
Default slider
Default dark grey slider color
Success slider style
Using ui-slider-success class
Primary slider style
Using ui-slider-primary class
Warning slider style
Using ui-slider-warning class
Danger slider style
Using ui-slider-danger class
Info slider style
Using ui-slider-info class
Other slider options Options of jQuery UI sliders
Sizes. Default handle
Using ui-slider-lg (sm, xs) classes
Sizes. Solid handle
Using ui-slider-solid class
Sizes. White handle
Using ui-handle-white class