Angular Bootstrap Slider

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

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

Examples of Bootstrap slider use:

  • Video progress bar
  • Volume increase/decrease
  • Enthusiasm-o-meter

See the following 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.


Basic slider MDB Pro component


<form class="range-field mt-5">
    <div class="track">
        <div #rangeCloud class="range-cloud" title="range" [ngClass]="{'visible': this.visibility, 'hidden': !this.visibility}">

            <span class="text-transform">{{range}}</span>
        </div>
    </div>
    <input #input name="range" type="range" min="0" max="100" (focus)="visibility = true" (blur)="visibility = false" [(ngModel)]="range"
        (change)="coverage()">
</form>
        

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

@Component({
  selector: 'range-example',
  templateUrl: 'range.html',
})

export class RangeComponent {
    @ViewChild('input') input: ElementRef;
    @ViewChild('rangeCloud') rangeCloud: ElementRef;
    range: any = 50;

    constructor(private renderer: Renderer2) { }

    coverage() {
    if (typeof this.range === "string" && this.range.length !== 0) {

      return this.range;
    }
    const maxValue = this.input.nativeElement.getAttribute('max');
    const cloudRange = (this.range / maxValue) * 100;
    this.renderer.setStyle(this.rangeCloud.nativeElement, 'left', cloudRange + '%')
  }

}

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>

    <form class="range-field mt-5">
      <div class="track">
        <div #rangeCloud class="range-cloud" title="range" [ngClass]="{'visible': this.visibility, 'hidden': !this.visibility}">

          <span class="text-transform">{{range}}</span>
        </div>
      </div>
      <input #input name="range" type="range" min="0" max="100" (focus)="visibility = true" (blur)="visibility = false" [(ngModel)]="range"
        (change)="coverage()">
    </form>

    <!-- Grid row -->
    <div class="row">

      <!-- Grid column -->
      <div class="col-md-6 text-center pb-5">

        <h2>
          <span class="badge blue lighten-2 mb-4">You earn</span>
        </h2>
        <h2 class="display-4" style="color:#0d47a1">
          <strong id="resellerEarnings">{{100 - range }} $</strong>
        </h2>

      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-6 text-center pb-5">

        <h2>
          <span class="badge blue lighten-2 mb-4">Client pays</span>
        </h2>
        <h2 class="display-4" style="color:#0d47a1">
          <strong id="clientPrice">{{319 - range}} $</strong>
        </h2>

      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

  </mdb-card-body>
</mdb-card>
        

import { Component, ViewChild, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  @ViewChild('input') input: ElementRef;
  @ViewChild('rangeCloud') rangeCloud: ElementRef;
  range: any = 50;

  constructor(private renderer: Renderer2) { }

  coverage() {
    if (typeof this.range === "string" && this.range.length !== 0) {

      return this.range;
    }
    const maxValue = this.input.nativeElement.getAttribute('max');
    const cloudRange = (this.range / maxValue) * 100;
    this.renderer.setStyle(this.rangeCloud.nativeElement, 'left', cloudRange + '%')
  }

}

Slider with different width MDB Pro component


<form class="range-field mt-5 w-25">
  <div class="track">
    <div #rangeCloud class="range-cloud" title="range" [ngClass]="{'visible': this.visibility, 'hidden': !this.visibility}">

      <span class="text-transform">{{range}}</span>
    </div>
  </div>
  <input #input name="range" type="range" min="0" max="100" (focus)="visibility = true" (blur)="visibility = false" [(ngModel)]="range"
    (change)="coverage()">
</form>

<form class="range-field mt-5 w-50">
  <div class="track">
    <div #rangeCloud class="range-cloud" title="range" [ngClass]="{'visible': this.visibility, 'hidden': !this.visibility}">

      <span class="text-transform">{{range}}</span>
    </div>
  </div>
  <input #input name="range" type="range" min="0" max="100" (focus)="visibility = true" (blur)="visibility = false" [(ngModel)]="range"
    (change)="coverage()">
</form>

<form class="range-field mt-5 w-75">
  <div class="track">
    <div #rangeCloud class="range-cloud" title="range" [ngClass]="{'visible': this.visibility, 'hidden': !this.visibility}">

      <span class="text-transform">{{range}}</span>
    </div>
  </div>
  <input #input name="range" type="range" min="0" max="100" (focus)="visibility = true" (blur)="visibility = false" [(ngModel)]="range"
    (change)="coverage()">
</form>

<form class="range-field mt-5 w-100">
  <div class="track">
    <div #rangeCloud class="range-cloud" title="range" [ngClass]="{'visible': this.visibility, 'hidden': !this.visibility}">

      <span class="text-transform">{{range}}</span>
    </div>
  </div>
  <input #input name="range" type="range" min="0" max="100" (focus)="visibility = true" (blur)="visibility = false" [(ngModel)]="range"
    (change)="coverage()">
</form>
    

import { Component, ViewChild, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  @ViewChild('input') input: ElementRef;
  @ViewChild('rangeCloud') rangeCloud: ElementRef;
  range: any = 50;

  constructor(private renderer: Renderer2) { }

  coverage() {
    if (typeof this.range === "string" && this.range.length !== 0) {

      return this.range;
    }
    const maxValue = this.input.nativeElement.getAttribute('max');
    const cloudRange = (this.range / maxValue) * 100;
    this.renderer.setStyle(this.rangeCloud.nativeElement, 'left', cloudRange + '%')
  }

}
	

Slider with first and last value 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 my-4">
      <span class="font-weight-bold indigo-text mr-2">{{min}}</span>
      <form class="range-field mt-5 w-25">
        <div class="track">
          <div #rangeCloud class="range-cloud" title="range" [ngClass]="{'visible': this.visibility, 'hidden': !this.visibility}">

            <span class="text-transform">{{range}}</span>
          </div>
        </div>
        <input #input name="range" type="range" min="0" max="100" (focus)="visibility = true" (blur)="visibility = false" [(ngModel)]="range"
          (change)="coverage()">
      </form>
      <span class="font-weight-bold indigo-text ml-2">{{max}}</span>
    </div>

    <div class="d-flex justify-content-center my-4">
      <span class="font-weight-bold blue-text mr-2">{{min}}</span>
      <form class="range-field mt-5 w-50">
        <div class="track">
          <div #rangeCloud class="range-cloud" title="range" [ngClass]="{'visible': this.visibility, 'hidden': !this.visibility}">

            <span class="text-transform">{{range}}</span>
          </div>
        </div>
        <input #input name="range" type="range" min="0" max="100" (focus)="visibility = true" (blur)="visibility = false" [(ngModel)]="range"
          (change)="coverage()">
      </form>
      <span class="font-weight-bold blue-text ml-2">{{max}}</span>
    </div>

    <div class="d-flex justify-content-center my-4">
      <span class="font-weight-bold purple-text mr-2">{{min}}</span>
      <form class="range-field mt-5 w-75">
        <div class="track">
          <div #rangeCloud class="range-cloud" title="range" [ngClass]="{'visible': this.visibility, 'hidden': !this.visibility}">

            <span class="text-transform">{{range}}</span>
          </div>
        </div>
        <input #input name="range" type="range" min="0" max="100" (focus)="visibility = true" (blur)="visibility = false" [(ngModel)]="range"
          (change)="coverage()">
      </form>
      <span class="font-weight-bold purple-text ml-2">{{max}}</span>
    </div>

  </mdb-card-body>
</mdb-card>
    

import { Component, ViewChild, Renderer2, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  @ViewChild('input') input: ElementRef;
  @ViewChild('rangeCloud') rangeCloud: ElementRef;
  range: any = 50;
  min: number = null;
  max: number = null;

  constructor(private renderer: Renderer2) { }

  coverage() {
    console.log(this.input.nativeElement.min);
    console.log(this.input.nativeElement.max);
    if (typeof this.range === "string" && this.range.length !== 0) {

      return this.range;
    }
    const maxValue = this.input.nativeElement.getAttribute('max');
    const cloudRange = (this.range / maxValue) * 100;
    this.renderer.setStyle(this.rangeCloud.nativeElement, 'left', cloudRange + '%')
  }

  ngOnInit() {
    this.min = this.input.nativeElement.min;
    this.max = this.input.nativeElement.max;
  }

}
	

API Reference:

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.

API Reference for MDB Angular Slider:
// CardsFreeModule
import { CardsFreeModule } from 'ng-uikit-pro-standard'
// Forms Module - for ngModel
import { FormsModule } from '@angular/forms'