- ##### Basic Components

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

- ##### Advance Components

- Sweet alert
- Datepicker
- Lightbox
- Modal
- Notification
- Rangeslider
- Slider
- Syntax Highlighter
- Tour
- Tree view

Explore Components

## Range Slider

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.

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.

###### 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 label
Example low value Example high value

###### Highlight ranges on slider with rangeHighlights attribute 14

###### Using tick marks at specific positions..

###### Rtl mode (auto)

-5 20

##### Settings

- ###### Theme Mode

  Choose light or dark mode or Auto

- ###### Sidebar Theme

  Choose Sidebar Theme

- ###### Accent color

  Choose your primary theme color

- ###### Sidebar Caption

  Sidebar Caption Hide/Show

- ###### Theme Layout

  LTR/RTL

- ###### Layout Width

  Choose Full or Container Layout