Rate this docs

Angular Bootstrap slider

Angular Slider - Bootstrap 4 & Material Design

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



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

      

Material slider MDB Pro component

Material Design styling for 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>
                    <span class="badge blue lighten-2 mb-4">You earn</span>
                  </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>
                    <span class="badge blue lighten-2 mb-4">Client pays</span>
                  </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 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 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;
    }
}
	

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.

// CardsFreeModule
import { CardsFreeModule } from 'ng-uikit-pro-standard'
// Forms Module - for ngModel
import { FormsModule } from '@angular/forms'

Inputs

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"

Outputs

Name Type Description Example
rangeValueChange EventEmitter<any> Emits the actual range slider value after change (rangeValueChange)="onRangeValueChange($event)"