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.

Show code

Basic example with values

You can show values in another element in the DOM.

Value:
First:
Second:
Show code

One range

You can set a one range to your slider using the data-mdb-number-of-ranges attribute.

Show code

Start Values

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

Value:
Show code

Tooltips

You can add tooltips to the ranges using the tooltip option.

Show code

Step example

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

Show code