Basic sliders
Basic jQuery UI slidersBasic 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 slidersSlider 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 orientationBasic vertical sliders
Using orientation: 'vertical'
option
Vertical slider with pips
Using .slider("pips")
method
Sizes. Default handle
Using ui-slider-lg (sm)
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 colorsDefault 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 slidersSizes. Default handle
Using ui-slider-lg (sm)
classes
Sizes. Solid handle
Using ui-slider-solid
class
Sizes. White handle
Using ui-handle-white
class