jQuery UI - Sliders

Statistics Invoices Schedule
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

70 52 80 34
Vertical slider with pips

Using .slider("pips") method

2 5 8
Sizes. Default handle

Using ui-slider-lg (sm, xs) classes

70 52 80 34
Range with fixed minimum

Set min value with range: 'min' option

70 52 80 34
Vertical slider with labels

Using rest: 'label' option

1 2 3
Sizes. Solid handle

Using ui-slider-solid class

70 52 80 34
Range with fixed maximum

Set max value with range: 'max' option

70 52 80 34
With handle tooltips

Using both float and pips methods

2 5 8
Sizes. White handle

Using ui-handle-white class

70 52 80 34
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

© 2015. Limitless Web App Kit by Eugene Kopyov siddim.com