Multi Range Slider MDB Pro component
Multi-Range Slider - Bootstrap 5 & Material Design 2.0 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
Basic example
A multi-range-slider slider is gonna autoinit if you add class multi-range-slider to your element. Multi-range Slider starts with max 100 and min 0 values.
Basic example with values
You can show values in the another element in dom
One range
You can set a one range to your slider with option numberOfRanges or with data-mdb-attr.
Start Values
You can change start values to ranges with option startValues.
Tooltips
You can set tooltip to ranges with option tooltip.
Step example
You can set a step to the ranges with option step.
Multi Range Slider - API
Usage
Via data attributes
<div class="multi-range-slider" data-mdb-tooltip="true"></div>
Via JavaScript
const basicExample = document.querySelector('.multi-ranges-basic');
const basicExampleInit = new mdb.MultiRangeSlider(basicExample);
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$('.example-class').multiRangeSlider(options);
Options
Name | Type | Default | Description |
---|---|---|---|
max
|
number | 100 |
Set maximum range of slider |
min
|
number | 0 |
Set minimum range of slider |
numberOfRanges
|
number | 2 |
Set number of ranges |
startValues
|
Array[number] | [0,100] |
Set width of range |
step
|
number | 5 |
Set step to range |
tooltips
|
boolean | false |
Set tooltips to ranges |
Methods
Name | Description | Example |
---|---|---|
setValue
|
Set value to range |
mySlider.setValue()
|
var mySlider = document.getElementById('slider')
var sliderInit = new mdb.Modal(mySlider)
mySlider.toggle()
Events
Name | Description |
---|---|
showPercent.mdb.multiRangeSlider
|
This event fires when you move your mouse/touch with active range and showing percent instead of values. |
value.mdb.multiRangeSlider
|
This event fires when you move your mouse/touch with active range and showing percent instead of values. |
start.mdb.multiRangeSlider
|
This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
var mySlider = document.getElementById('mySlider1')
mySlider.addEventListener('showPercent.mdb.multiRangeSlider', function (e) {
// do something...
})
Import
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import { MultiRangeSlider } from 'mdb-ui-kit';