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

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.



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


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.



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 number 5 Set step to range
tooltips boolean false Set tooltips to ranges


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)

        var mySlider = document.getElementById('slider');
        var sliderInit = new mdb.MultiRangeSlider(mySlider);


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...


MDB UI KIT also works with module bundlers. Use the following code to import this component:

        import { MultiRangeSlider } from 'mdb-ui-kit';