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.

Edit in sandbox 
<mdb-multi-range></mdb-multi-range>

Basic example with values

You can show values in the another element in dom

Value:
First:
Second:
Edit in sandbox 
<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.

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

Start Values

You can change start values to ranges with option startValues.

Value:
Edit in sandbox 
<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.

undefined
undefined
Edit in sandbox 
<mdb-multi-range [tooltip]="true"></mdb-multi-range>

Step

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

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

Multi Range Slider - API

Import

Edit in sandbox 
import { MdbMultiRangeModule } from 'mdb-angular-ui-kit/multi-range';
import { FormsModule } from '@angular/forms';

…
@NgModule ({
  ...
  imports: [MdbMultiRangeModule, FormsModule],
  ...
})

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 Type Description
startDrag EventEmitter<void> This event fires when you start dragging the thumb.
endDrag EventEmitter<void> This event fires when you end dragging the thumb.
changeValue EventEmitter<void> This event fires when any of the Multi range slider values changes.
Edit in sandbox 
<mdb-multi-range
  (startDrag)="handleStartDrag()"
></mdb-multi-range>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  handleStartDrag() {
    console.log('start drag');
  }
}

CSS variables

Edit in sandbox 
// .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-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

Edit in sandbox 
$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;