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

---

Range selector, options specified via data attribute.

---

Filter by price interval: € 10 € 1000

Sliders can be enabled and disabled.

---

Enabled

Using events to work with the values and style the selection and handles via CSS.

---

R

G

B

Vertical slider with reversed values (largest to smallest).

---

Unusual tooltip positions

---

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

---

Click to Destroy

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

---

Current Slider Value: 3

Tooltip can always be displayed.

---

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

---

Setting custom handlers.

---

Using a custom step interval.

---

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.

Using tick marks and labels.

---

Using tick marks at specific positions.

---

With a logarithmic scale.

---

Focus the slider handle after a value change.

---

Accessibility with ARIA labels

---

Example slider lable Example low value Example high value

Auto-Register data-provide="slider" Elements

---

Example slider label

Slider-Elements initially hidden

---

Show

Create an input element wth the data-provide="slider" attribute automatically turns it into a slider. Options can be supplied via data-slider- attributes.

---

Highlight ranges on slider with rangeHighlights attribute 14

---

Using tick marks at specific positions..

---

Rtl mode (auto)

---