Multi-Range Slider

Multi-Range Slider - Bootstrap 5 & Material Design 2.0 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.


                      p {
                      color: blue;
                      }


                      var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Basic example with values

You can show values in the another element in dom

Value:

First:

Second:


                      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,
                      });

One range

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


                      const oneRange = document.querySelector('.multi-ranges-one');
                      const oneRangeValue = document.querySelector('#multi-ranges-value');

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

Start Values

You can change start values to ranges with option startValues.

Value:


                      

                      Value:


                      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],
                      });

Tooltips

You can set tooltip to ranges with option tooltip.


                      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.


                      const step = document.querySelector('#multi-ranges-step');
                      const initStep= new mdb.MultiRangeSlider(step, { step: true });

Multi-Range Slider - API

Usage

Via data attributes

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
`direction`	String	`'button'`	Changes button tag
`direction`	String	`''`	Changes direction
`margin`	string\|\|number\|\|null	`''`	Add margin to ranges
`max`	number	`100`	Set maximum range of slider
`min`	number	`0`	Set minimum range of slider
`numberOfRanges`	number	`2`	Set number of ranges
`numberOfRanges`	number	`2`	Set number of ranges
`orientation`	string	`horizontal`	Set orientation to slider. Available options: horizonta, vertical
`padding`	string\|\|number\|\|null	`null`	Set padding to range
`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
`setValue`	Set value to range	`mySlider.setValue()`


                    var mySlider = document.getElementById('slider')
                    var sliderInit = new mdb.Modal(mySlider)
                    mySlider.toggle()

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