Documentation
Live Preview
Purchase Now
Basic Component
All
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
Rangeslider
Slider
Syntax Highlighter
Tour
Tree view
Explore Components
Rangeslider
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.
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 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
Mantis Customizer
Theme Layout
Choose your layout
Direction
RTL
Theme Mode
Choose light or dark mode
Light
Dark
Color Scheme
Choose your primary theme color
Theme 1
Theme 2
Theme 3
Theme 4
Theme 5
Theme 6
Theme 7
Theme 8
Theme 9
Layout Width
Choose fluid or container layout
Fluid
Container
Font Family
Choose your font family.
Aa
Public Sans
Aa
Roboto
Aa
Poppins
Aa
Inter
Reset Layout