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, {
            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-tooltips="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 
        
            
          $(document).ready(() => {
            $('.example-class').multiRangeSlider(options);
          });

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

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 
        
            
        const sliderEl = document.querySelector('#sliderEl');
        const mySlider = new mdb.MultiRangeSlider(sliderEl);
        mySlider.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 
        
            
        const mySlider = document.querySelector('#mySlider1')
        mySlider.addEventListener('showPercent.mdb.multiRangeSlider', (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';

CSS variables

Edit in sandbox 
        
            
        // .multi-range-slider
        --#{$prefix}multi-range-sliderhand-focus-box-shadow: #{$form-range-thumb-focus-box-shadow};
        --#{$prefix}multi-range-slider-horizontal-height: #{$multi-range-slider-horizontal-height};
        --#{$prefix}multi-range-hand-width: #{$form-range-thumb-width};
        --#{$prefix}multi-range-hand-height: #{$form-range-thumb-height};
        --#{$prefix}multi-range-hand-bg: #{$form-range-thumb-bg};
        --#{$prefix}multi-range-hand-border-radius: #{$range-thumb-border-radius};
        --#{$prefix}multi-range-hand-box-shadow: #{$form-range-thumb-box-shadow};
        --#{$prefix}multi-range-hand-transition: #{$form-range-thumb-transition};
        --#{$prefix}multi-range-hand-active-bg: #{$form-range-thumb-active-bg};
        --#{$prefix}multi-range-track-bg: #{$form-range-track-bg};
        --#{$prefix}multi-range-tooltip-transition: #{$multi-range-tooltip-transition};
        --#{$prefix}multi-range-tooltip-border-radius: #{$multi-range-tooltip-border-radius};
        --#{$prefix}multi-range-tooltip-transform: #{$multi-range-tooltip-transform};
        --#{$prefix}multi-range-tooltip-transform-active: #{$multi-range-tooltip-transform-active};
        --#{$prefix}multi-range-tooltip-content-size: #{$multi-range-tooltip-content-size};
        --#{$prefix}multi-range-tooltip-content-transform: #{$multi-range-tooltip-content-transform};
        --#{$prefix}multi-range-tooltip-content-font-size: #{$multi-range-tooltip-content-font-size};
        --#{$prefix}multi-range-tooltip-position-top: #{$multi-range-tooltip-position-top};

SCSS variables

Edit in sandbox 
        
            
        $multi-range-slider-horizontal-height: 0.25rem;
        $multi-range-tooltip-transition: top 0.2s, transform 0.2s, border-radius 0.2s;
        $multi-range-tooltip-border-radius: 50% 50% 50% 0;
        $multi-range-tooltip-position-top: -18px;
        $multi-range-tooltip-transform: rotate(-45deg) translate(-5px, -4px) scale(0);
        $multi-range-tooltip-transform-active: rotate(-45deg) translate(-5px, -4px) scale(1);
        $multi-range-tooltip-content-size: 30px;
        $multi-range-tooltip-content-transform: rotate(45deg) translateY(25%);
        $multi-range-tooltip-content-font-size: 10px;