Examples

noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies

View Official Website
Basic Range Slider

A simple single-value slider.

Sizes

Adjust element size using different slider sizes.

Line Style

Customize line handle style using sliders.

Color Scheme Sliders

Sliders styled with theme colors.

Multi Elements Range

Dual-handle slider for selecting a range.

Value Range Slider (nonlinear)

Shows selected value range below the slider.

{{ linearRange[0] }}
{{ linearRange[1] }}
Locking Sliders Together

Synchronize two sliders with a toggle lock.

{{ val1 }}
{{ val2 }}
Tooltip Slider

Displays tooltips with merged slider values.

Soft Limits Slider

Allows overflow beyond defined min/max.

Vertical Sliders

Sliders arranged vertically.