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.

Show code Edit in sandbox

HTML

        
            
        <mdb-multi-range></mdb-multi-range>

Basic example with values

You can show values in the another element in dom

Value:

First:

Second:

Show code Edit in sandbox

HTML
TypeScript

        
            
        <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.

Show code Edit in sandbox

HTML

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

Start Values

You can change start values to ranges with option startValues.

Value:

Show code Edit in sandbox

HTML
TypeScript

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

Tooltips

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

Show code Edit in sandbox

HTML

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

Step

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

Show code Edit in sandbox

HTML

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

Multi Range Slider - API

Import

Show code Edit in sandbox

app.module.ts

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

Inputs

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

Outputs

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.