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.

Edit in sandbox 
        
            
          <div class="multi-range-slider"></div>

        
        
    
        
            
          const basicExample = document.querySelector('.multi-ranges-basic');
          const oneRangeValueBasic = document.querySelector('#multi-ranges-basic-value');

          const basicExampleInit = new mdb.MultiRangeSlider(basicExample, {
            max: 100,
            min: 0,
          });

Basic example with values

You can show values in the another element in dom

Value:
First:
Second:
Edit in sandbox 
        
            
          <div class="multi-ranges-basic"></div>
          <div id="multi-ranges-basic-value" class="mt-3">
            Value:
            <span class="d-flex flex-column">
              <div>First:</div>
              <div>Second:</div>
            </span>
          </div>
        
        
    
        
            
           const basicExample = document.querySelector('.multi-ranges-basic');
           const oneRangeValueBasic = document.querySelector('#multi-ranges-basic-value');

            const basicExampleInit = new mdb.MultiRangeSlider(basicExample, {
              max: 100,
              min: 0,
            });

            basicExample.addEventListener('value.mdb.multiRangeSlider', (e) => {
              const [first, second] = e.values.rounded;
              oneRangeValueBasic.innerHTML = `
                Value: <div class="d-flex flex-column">
                  <div>First: ${first}</div>
                  <div>Second  ${second}</div>
                </div>`;
            });

One range

You can set a one range to your slider with option numberOfRanges or with data-mdb-attr.

Edit in sandbox 
        
            
          <div class="multi-ranges-one" data-mdb-number-of-ranges="1"></div>
        
        
    
        
            
          const oneRange = document.querySelector('.multi-ranges-one');

          const oneRangeinit = new mdb.MultiRangeSlider(oneRange, {
            range: {
              max: 300,
              min: 0,
            },
          });

Start Values

You can change start values to ranges with option startValues.

Value:
Edit in sandbox 
        
            
          <div class="multi-ranges-start-values"></div>

          <div id="multi-ranges-start-values-show" class="mt-3">Value:</div>
        
        
    
        
            
          const startValue = document.querySelector('.multi-ranges-start-values');
          const startValueValues = document.querySelector('#multi-ranges-start-values-show');

          const startValueInit = new mdb.MultiRangeSlider(startValue, {
            startValues: [40, 80],
          });

          startValue.addEventListener('value.mdb.multiRangeSlider', (e) => {
            startValueValues.innerHTML = `Value: <span class="d-flex flex-column">
              <div>First: ${e.values.rounded[0]}</div>
              <div>Second  ${e.values.rounded[1]}</div>
                </span>`;
          });

Tooltips

You can set tooltip to ranges with option tooltip.

Edit in sandbox 
        
            
          <div id="multi-ranges-tooltips" data-mdb-tooltip="true"></div>

        
        
    
        
            
          const tooltips = document.querySelector('#multi-ranges-tooltips');
          const initTooltips = new mdb.MultiRangeSlider(tooltips, { tooltips: true, startValues: [0, 100] });

Step example

You can set a step to the ranges with option step.

Edit in sandbox 
        
            
          <div class="multi-range-slider" data-mdb-step="5"></div>
        
        
    
        
            
          const step = document.querySelector('#multi-ranges-step');
          const initStep= new mdb.MultiRangeSlider(step, { step: true });

Multi Range Slider - API

Usage

Via data attributes

Edit in sandbox 
        
            
        <div class="multi-range-slider" data-mdb-tooltip="true"></div>

Via JavaScript

Edit in sandbox 
        
            
        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.

Edit in sandbox 
        
            
        $('.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
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)
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)
Edit in sandbox 
        
            
        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.
Edit in sandbox 
        
            
        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:

Edit in sandbox 
        
            
        import { MultiRangeSlider } from 'mdb-ui-kit';