Angular Bootstrap Slider

Angular Slider - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap slider is an interactive component that lets the user swiftly slide through possible values spread on a desired range.

Its basic implementation is quite simple and does not require big blocks of code.

Examples of Angular Bootstrap slider use include:

  • Video progress bars
  • Volume increase/decrease
  • Enthusiasm-o-meters

See the following Angular Bootstrap slider examples:

Info notification

If you were looking for a slider and you meant a carousel component, click here to see all the possibilities.

Default slider

Default styling for Angular Bootstrap Slider component

        
            
          <mdb-range-input default="true" id="range" min="0" max="100"></mdb-range-input>

Material slider MDB Pro component

Material Design styling for an Angular Bootstrap Slider component

        
            
          <mdb-range-input id="range" min="0" max="100"></mdb-range-input>

Slider with price counter MDB Pro component

Slide to see the pricing change

You earn

$75

Client pays

$319 

        
            
            <mdb-card>
              <mdb-card-body>
                <h3 class="text-center font-weight-bold blue-text mt-3 mb-4 pb-4">
                  <strong>Slide to see the pricing change</strong>
                </h3>
                <hr>
                <mdb-range-input (rangeValueChange)="onRangeValueChange($event)" id="range" min="0" max="100"></mdb-range-input>
                <div class="row">
                  <div class="col-md-6 text-center pb-5">
                    <h2>
                      <mdb-badge color="blue" class="lighten-2 mb-4">You earn</mdb-badge>
                    </h2>
                    <h2 class="display-4" style="color:#0d47a1">
                      <strong id="resellerEarnings">{{range}} $</strong>
                    </h2>
                  </div>
                  <div class="col-md-6 text-center pb-5">
                    <h2>
                      <mdb-badge color="blue" class="lighten-2 mb-4">Client pays</mdb-badge>
                    </h2>
                    <h2 class="display-4" style="color:#0d47a1">
                      <strong id="clientPrice">{{219 + range}} $</strong>
                    </h2>
                  </div>
                </div>
              </mdb-card-body>
            </mdb-card>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'card-slider',
              templateUrl: './card-slider.component.html',
              styleUrls: ['./card-slider.component.scss'],
            })
            export class CardSliderComponent {
              range: any = 0;

              onRangeValueChange(event: any) {
                const value = event.value;
                this.range = value;
              }
            }

Slider with different width MDB Pro component 

        
            
            <form class="my-3 w-25">
              <mdb-range-input id="range" min="1" value="50" max="100"></mdb-range-input>
            </form>
            <form class="my-3 w-50">
              <mdb-range-input id="range" min="1" value="50" max="100"></mdb-range-input>
            </form>
            <form class="my-3 w-75">
              <mdb-range-input id="range" min="1" value="50" max="100"></mdb-range-input>
            </form>
            <form class="my-3 w-100">
              <mdb-range-input id="range" min="1" value="50" max="100"></mdb-range-input>
            </form>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'width-slider',
              templateUrl: './width-slider.component.html',
              styleUrls: ['./width-slider.component.scss'],
            })
            export class WidthSliderComponent {
              range: any = 0;

              onRangeValueChange(event: any) {
                const value = event.value;
                this.range = value;
              }
            }

Slider with first and last values MDB Pro component

0
100
0
100
0
100 
        
            
              <mdb-card class="indigo lighten-5">
              <mdb-card-body>
                <div class="d-flex justify-content-center align-items-center my-4">
                  <span class="font-weight-bold indigo-text mr-2">{{min}}</span>
                  <form class="my-3 w-25">
                    <mdb-range-input id="range" [min]="min" value="50" [max]="max"></mdb-range-input>
                  </form>
                  <span class="font-weight-bold indigo-text ml-2">{{max}}</span>
                </div>

                <div class="d-flex justify-content-center align-items-center my-4">
                  <span class="font-weight-bold blue-text mr-2">{{min}}</span>
                  <form class="my-3 w-50">
                    <mdb-range-input id="range" [min]="min" value="50" [max]="max"></mdb-range-input>
                  </form>
                  <span class="font-weight-bold blue-text ml-2">{{max}}</span>
                </div>

                <div class="d-flex justify-content-center align-items-center my-4">
                  <span class="font-weight-bold purple-text mr-2">{{min}}</span>
                  <form class="my-3 w-75">
                    <mdb-range-input id="range" [min]="min" value="50" [max]="max"></mdb-range-input>
                  </form>
                  <span class="font-weight-bold purple-text ml-2">{{max}}</span>
                </div>
              </mdb-card-body>
            </mdb-card>
            
        
    
        
            
              import { Component } from '@angular/core';

              @Component({
                selector: 'first-and-last-slider',
                templateUrl: './first-and-last-slider.component.html',
                styleUrls: ['./first-and-last-slider.component.scss'],
              })
              export class FirstAndLastSliderComponent {
                range: any = 0;
                min = 0;
                max = 100;

                onRangeValueChange(event: any) {
                  const value = event.value;
                  this.range = value;
                }
              }

Multi range slider MDB Pro component 

        
            
          <mdb-multi-range-input id="multi-range" min="0" max="100"></mdb-multi-range-input>

Angular Slider - API

In this section you will find informations about required modules of slider component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

        
            
          import { RangeModule, CardsFreeModule } from 'ng-uikit-pro-standard';
          import { FormsModule } from '@angular/forms';
Import example Modules list

Inputs

MdbRangeInputComponent
Name Type Default Description Example
id string ' ' Specifies the input id id="range"
required boolean - Specifies if the input is required or not required="false"
name string ' ' Specifies the input name name="range"
value string ' ' Specifies the input value value="50"
disabled boolean ' ' Specifies if the input should be disabled or not disabled="false"
min number 0 Specifies the minimal value of range slider min="1"
max number 100 Specifies the max value of range slider max="32"
step number 1 Specifies the step of the range slider step="3"
default boolean false Specifies the default Bootstrap appearance of the range slider default="true"
defaultRangeCounterClass string ' ' Specifies the additional classes of default range slider value counter defaultRangeCounterClass="flex-center red-text"
MdbMultiRangeInputComponent
Name Type Default Description Example
id string ' ' Specifies the input id id="range"
required boolean - Specifies if the input is required or not required="false"
name string ' ' Specifies the input name name="range"
value {first: number | string, second: number | string} {first: 0, second: 0} Specifies the input value value="{first: 10, second: 15}"
disabled boolean ' ' Specifies if the input should be disabled or not disabled="false"
min number 0 Specifies the minimal value of range slider min="1"
max number 100 Specifies the max value of range slider max="32"
step number 1 Specifies the step of the range slider step="3"

Outputs

Name Type Description Example
rangeValueChange EventEmitter<{ first: number, second: number }> Emits the actual range slider value after change (rangeValueChange)="onRangeValueChange($event)"