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

Required ES init: MultiRangeSlider *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

A Multi Range Slider is gonna autoinit if you add data-mdb-multi-range-slider-init attribute to your element. Slider starts with max 100 and min 0 values.

Edit in sandbox 
<div class="multi-range-slider" data-mdb-multi-range-slider-init></div>
// Initialization for ES Users
import { MultiRangeSlider, initMDB } from "mdb-ui-kit";

initMDB({ MultiRangeSlider });

Basic example with values

You can show values in another element in the DOM.

Value:
First:
Second:
Edit in sandbox 
<div id="multi-ranges-basic" class="multi-range-slider" data-mdb-multi-range-slider-init></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>
// Initialization for ES Users
import { MultiRangeSlider, initMDB } from "mdb-ui-kit";

initMDB({ MultiRangeSlider });

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

basicExample.addEventListener('valueChanged.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>
  `;
});
const basicExample = document.querySelector('#multi-ranges-basic');
const oneRangeValueBasic = document.querySelector('#multi-ranges-basic-value');

basicExample.addEventListener('valueChanged.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 using the data-mdb-number-of-ranges attribute.

Edit in sandbox 
<div class="multi-range-slider" data-mdb-multi-range-slider-init data-mdb-number-of-ranges="1"></div>
// Initialization for ES Users
import { MultiRangeSlider, initMDB } from "mdb-ui-kit";

initMDB({ MultiRangeSlider });

Start Values

You can customize the starting values for the ranges using the startValues option.

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

<div id="multi-ranges-start-values-show" class="mt-3">Value:</div>
// Initialization for ES Users
  import { MultiRangeSlider } from "mdb-ui-kit";

  const startValue = document.querySelector('.multi-ranges-start-values');
  const startValueValues = document.querySelector('#multi-ranges-start-values-show');

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

  startValue.addEventListener('valueChanged.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>
    `;
  });
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('valueChanged.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 add tooltips to the ranges using the tooltip option.

undefined
undefined
Edit in sandbox 
<div class="mt-3 multi-range-slider" data-mdb-multi-range-slider-init data-mdb-tooltip="true"></div>
// Initialization for ES Users
import { MultiRangeSlider, initMDB } from "mdb-ui-kit";

initMDB({ MultiRangeSlider });

Step example

You can define a step for the ranges using the step option.

Edit in sandbox 
<div class="multi-range-slider" data-mdb-multi-range-slider-init data-mdb-step="5"></div>
// Initialization for ES Users
import { MultiRangeSlider, initMDB } from "mdb-ui-kit";

initMDB({ MultiRangeSlider });

Multi Range Slider - API

Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

Edit in sandbox 
import { MultiRangeSlider, initMDB } from "mdb-ui-kit";
initMDB({ MultiRangeSlider });
import "mdb-ui-kit"

Usage

Via data attributes

Using the Multi Range Slider component doesn't require any additional JavaScript code - simply add data-mdb-multi-range-slider-init attribute to .multi-range-slider and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

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

Via JavaScript

Edit in sandbox 
const basicExample = document.querySelector('.multi-ranges-basic');
const basicExampleInit = new MultiRangeSlider(basicExample);
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="100".

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 string | null | number null Set step to range
tooltip 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 MultiRangeSlider(sliderEl);
mySlider.dispose();
const sliderEl = document.querySelector('#sliderEl');
const mySlider = new mdb.MultiRangeSlider(sliderEl);
mySlider.dispose();

Events

Name Description
valueChanged.mdb.multiRangeSlider This event fires when value is changed by moving the slider.
start.mdb.multiRangeSlider This event is triggered immediately when the slider thumb is clicked. The clicked element is accessible through the relatedTarget property of the event.
end.mdb.multiRangeSlider This event is triggered when the user releases the slider thumb. The released element is accessible through the relatedTarget property of the event.
Edit in sandbox 
const mySlider = document.querySelector('#mySlider1')
mySlider.addEventListener('valueChanged.mdb.multiRangeSlider', (e) => {
  // do something...
})

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-value-color: #{$range-thumb-value-color};
--#{$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;