Slider

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 Angular Bootstrap slider use:

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

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

Example range



        
            Example range
            
            {{ range }}


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

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

export class DefaultRangeComponent {
    @ViewChild('input') input: 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');
  }

}

Material slider MDB Pro component

Material Design styling for Angular Bootstrap Slider component


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;
  }

}