Range Slider

Basic Component

Alert Button Badges Breadcrumb Cards Color Collapse Carousel Dropdowns Offcanvas Pagination Progress List group Modal Spinner Tabs & pills Tooltip Toasts Typography Other

Advance Component

Sweet alert Datepicker Lightbox Model Notification Range slider Slider Syntax Highlighter Tour Tree view

Explore Components

Create an input element in the DOM, and then create an instance of Slider

Reference

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.

Vertical slider with reversed values (largest to smallest).

Unusual tooltip positions

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

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

Highlight ranges on slider with rangeHighlights attribute 14

Using tick marks at specific positions..

Rtl mode (auto)

-5 20

Basic Component

Advance Component

Range Slider

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

Range selector, options specified via data attribute.

Sliders can be enabled and disabled.

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

Vertical slider with reversed values (largest to smallest).

Unusual tooltip positions

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

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

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.

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

Highlight ranges on slider with rangeHighlights attribute 14

Using tick marks at specific positions..

Rtl mode (auto)

Mantis Customizer

Theme Layout

Theme Mode

Color Scheme

Layout Width

Font Family

Basic Component

Advance Component

Range Slider

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

Range selector, options specified via data attribute.

Sliders can be enabled and disabled.

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

Vertical slider with reversed values (largest to smallest).

Unusual tooltip positions

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

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

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.

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

Highlight ranges on slider with rangeHighlights attribute 14

Using tick marks at specific positions..

Rtl mode (auto)

Mantis Customizer

Theme Layout

Theme Mode

Color Scheme

Layout Width

Font Family

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