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

Value:
First:
Second:

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.

Value:

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
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);
        sliderInit.dispose();

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';