Multi Range Slider
Bootstrap 5 Multi Range Slide component
MDBootstrap slider is an interactive component that lets the user swiftly slide through possible values spread over a desired range.
Note: Read the API tab to find all available options and advanced customization
*
*
UMD autoinits are enabled
by default. This means that you don't need to initialize
the component manually. However if you are using MDBootstrap ES format then you should pass
the required components to the initMDB
method.
Basic example
A Multi Range Slider is gonna autoinit if you add data-mdb-multi-range-slider-init
attribute to your
element. Slider starts with max 100 and min 0 values.
Basic example with values
You can show values in another element in the DOM.
One range
You can set a one range to your slider using the data-mdb-number-of-ranges
attribute.
Start Values
You can customize the starting values for the ranges using the startValues
option.
Tooltips
You can add tooltips to the ranges using the tooltip
option.
Step example
You can define a step for the ranges using the step
option.
Multi Range Slider - API
Import
Importing components depends on how your application works. If you intend to use the MDBootstrap ES
format, you must
first import the component and then initialize it with the initMDB
method. If you are going to use the UMD
format,
just import the mdb-ui-kit
package.
Usage
Via data attributes
Using the Multi Range Slider component doesn't require any additional JavaScript code - simply add
data-mdb-multi-range-slider-init
attribute to
.multi-range-slider
and use other data attributes to set all options.
For ES
format, you must first import and call the initMDB
method.
Via JavaScript
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-
, as in data-mdb-max="100"
.
Name | Type | Default | Description |
---|---|---|---|
max
|
number | 100 |
Set maximum range of slider |
min
|
number | 0 |
Set minimum range of slider |
startValues
|
Array[number] | [0,100] |
Set width of range |
step
|
string | null | number | null |
Set step to range |
tooltip
|
boolean | false |
Set tooltips to ranges |
Methods
Name | Description | Example |
---|---|---|
dispose
|
Disposes a multi range slider instance |
sliderInit.dispose()
|
getInstance
|
Static method which allows you to get the multi range slider instance associated to a DOM element. |
MultiRangeSlider.getInstance(mySlider)
|
getOrCreateInstance
|
Static method which returns the multi range slider instance associated to a DOM element or create a new one in case it wasn't initialized. |
MultiRangeSlider.getOrCreateInstance(mySlider)
|
Events
Name | Description |
---|---|
valueChanged.mdb.multiRangeSlider
|
This event fires when value is changed by moving the slider. |
start.mdb.multiRangeSlider
|
This event is triggered immediately when the slider thumb is clicked. The clicked element is accessible through the relatedTarget property of the event. |
end.mdb.multiRangeSlider
|
This event is triggered when the user releases the slider thumb. The released element is accessible through the relatedTarget property of the event. |