Range

Angular Bootstrap 5 Range component

A Range is an interactive component that lets the user swiftly slide through possible values spread over the desired range.

Note: Read the API tab to find all available options and advanced customization

Basic example

Create custom <input type="range"> controls with .form-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it. 

        
            
            <mdb-range></mdb-range>

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events. 

        
            
            <mdb-range [disabled]="true"></mdb-range>

Min and max

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max options. 

        
            
            <mdb-range [min]="0" [max]="5"></mdb-range>

Steps

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using [step]="0.5". 

        
            
            <mdb-range [min]="0" [max]="5" [step]="0.5"></mdb-range>

Range - API

Import

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

Inputs

Name Type Default Description
id string '' Specifies the input id
label string '' Specifies the value for label element
name string '' Specifies the input name
value string '' Specifies the input value
disabled boolean '' Specifies if the input should be disabled or not
min number 0 Specifies the minimal value of range slider
max number 100 Specifies the max value of range slider
step number 1 Specifies the step of the range slider

Outputs

Name Type Description
rangeValueChange EventEmitter<any> Emits the actual range slider value after change. 
        
            
            <mdb-range (rangeValueChange)="onRangeValueChange($event)"></mdb-range>
            
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              onRangeValueChange(event: any): void {
                console.log('on range value change: ', event);
              }
            }

CSS variables

        
            
        // .range
        --#{$prefix}range-thumb-height: #{$range-thumb-height};
        --#{$prefix}range-thumb-width: #{$range-thumb-width};
        --#{$prefix}range-thumb-top: #{$range-thumb-top};
        --#{$prefix}range-thumb-margin-left: #{$range-thumb-margin-left};
        --#{$prefix}range-thumb-border-radius: #{$range-thumb-border-radius};
        --#{$prefix}range-thumb-transform: #{$range-thumb-transform};
        --#{$prefix}range-thumb-transition: #{$range-thumb-transition};
        --#{$prefix}range-thumb-value-font-size: #{$range-thumb-value-font-size};
        --#{$prefix}range-thumb-value-line-height: #{$range-thumb-value-line-height};
        --#{$prefix}range-thumb-value-color: #{$range-thumb-value-color};
        --#{$prefix}range-thumb-value-font-weight: #{$range-thumb-value-font-weight};
        --#{$prefix}range-thumb-background: #{$range-thumb-background};

SCSS variables

        
            
        $range-thumb-height: 30px;
        $range-thumb-width: 30px;
        $range-thumb-top: -35px;
        $range-thumb-background: $primary;
        $range-thumb-active-background: tint-color($primary, 70%);
        $range-thumb-margin-left: -15px;
        $range-thumb-border-radius: 50% 50% 50% 0;
        $range-thumb-transform: scale(0);
        $range-thumb-transition: transform 0.2s ease-in-out;
        $range-thumb-value-font-size: 12px;
        $range-thumb-value-line-height: 30px;
        $range-thumb-value-color: rgb(255, 255, 255);
        $range-thumb-value-font-weight: 500;
        // override default bootstrap values for form range
        $form-range-thumb-bg: $range-thumb-background;
        $form-range-thumb-active-bg: $range-thumb-active-background;