Range Slider Elements

  1. Home
  2. Elements
  3. Range Slider

SFor more information please refer the link Range Slider.

Basic example

Basic example with custom formatter and colored selected region via CSS.

Range selector

Range selector, options specified via data attribute (Filter by price interval).

Filter by interval: € 10€ 1000
Destroy example

Destroy instance of slider by calling destroy() method on slider instance via JavaScript.

Able to bind

Able to bind to 'slide' JQuery event on slider, which is triggered whenever the slider is used.

Current Slider Value: 3
enabled/disabled

Sliders can be enabled and disabled.

Enabled
Tooltip

Tooltip can always be displayed.

Precision

Precision (number of places after the decimal) can be specified.

custom handlers

Setting custom handlers.

Custom Interval

Using a custom step interval.

rtl mode

rtl mode (auto).

-520
slider handle

Focus the slider handle after a value change.



ARIA labels

Accessibility with ARIA labels.

Example slider labelExample low value
Example high value
Coloring segments

Coloring the low and high track segments.


Note that there is no low track on the single-value slider. The area to lesser than the value of the handle is the selection.

Unusual tooltip

Unusual tooltip positions.

initially hidden

Slider-Elements initially hidden.

Show
Using marks

Using tick marks and labels.

Using positions

Using tick marks at specific positions.

logarithmic

With a logarithmic scale.