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



    
        

            {{range}}


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$



  

    
      Slide to see the pricing change
    
    

    
      
        

          {{range}}
        
      
      
    

    
    

      
      

        
          You earn
        
        
          {{100 - range }} $
        

      
      

      
      

        
          Client pays
        
        
          {{319 - range}} $


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



  
    

      {{range}}
    
  
  



  
    

      {{range}}
    
  
  



  
    

      {{range}}
    
  
  



  
    

      {{range}}


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


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'

Import example Modules list