Multi Range Slider

Angular 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

Use mdb-multi-range element to render the multi range slider.


Basic example with values

You can show values in the another element in dom

        <mdb-multi-range [(ngModel)]="external"></mdb-multi-range>
        <div> Value: </div>
          <div>First: {{external[0]}}</div>
          <div>Second: {{external[1]}}</div>
          external = [0, 0];

One range

You can set a one range to your slider with the [numberOfRanges] input.

        <mdb-multi-range [numberOfRanges]="1"></mdb-multi-range>

Start Values

You can change start values to ranges with option startValues.

        <mdb-multi-range [startValues]="[40, 80]" [(ngModel)]="externalStartValues"></mdb-multi-range>
        <div> Value: </div>
          <div>First: {{externalStartValues[0]}}</div>
          <div>Second: {{externalStartValues[1]}}</div>
        externalStartValues = {0, 0};


You can set tooltip to ranges with the [tooltip] input.

          <mdb-multi-range [tooltip]="true"></mdb-multi-range>


You can set a step to the ranges with the [step] input.

        <mdb-multi-range [step]="5"></mdb-multi-range>

Multi Range Slider - API


        import { MdbMultiRangeModule } from 'mdb-angular-ui-kit/multi-range';
        @NgModule ({
          imports: [MdbMultiRangeModule],


Name Type Default Description
[max] number 100 Set maximum range of slider
[min] number 0 Set minimum range of slider
[startValues] number[] [0,100] Set width of range
[step] number 5 Set step to range
[tooltip] boolean false Set tooltips to ranges


Name Description
startDrag This event fires when you start dragging the thumb.
endDrag This event fires when you end dragging the thumb.
changeValue This event fires when any of the Multi range slider values changes.