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
*
*
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.
<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.
<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.
<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.
<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.
<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.
<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.
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.
<div class="multi-range-slider" data-mdb-multi-range-slider-init></div>
Via JavaScript
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.
$(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)
|
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. |
const mySlider = document.querySelector('#mySlider1')
mySlider.addEventListener('valueChanged.mdb.multiRangeSlider', (e) => {
// do something...
})
CSS variables
// .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
$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;