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

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

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

Sizes. Default handle

Using ui-slider-lg (sm) classes

Sizes. Solid handle

Using ui-slider-solid class

Sizes. White handle

Using ui-handle-white class