Angular Sliders

Our Angular Sliders (customised noUiSlider) refers to a lightweight JavaScript range slider library. The slider offers a wide selection of options and settings and is compatible with a ton of (touch) devices, including those running iOS, Android, Windows 8/8.1/10, Windows Phone 8.1 and Windows Mobile 10.
Keep reading our Angular Sliders examples and learn how to use this plugin.

Initialization

Simply copy one of the code examples demonstrated below and include it in your page. Afterwards, you can modify the slider’s values with the ones you need.

Examples

Slider

<div class="input-slider-container">
  <div id="test" class="input-slider"></div>
</div>

<!-- Typescript -->

import { Component, OnInit, AfterViewInit } from '@angular/core';
import noUiSlider from "nouislider";

@Component({
  selector: 'app-sliders',
  templateUrl: './sliders.component.html',
  styleUrls: ['./sliders.component.scss']
})
export class SlidersComponent implements OnInit, AfterViewInit {
  constructor() { }
  ngOnInit() { }
  ngAfterViewInit(){
    var slider = document.getElementById("test");

    noUiSlider.create(slider, {
      start: 0,
      connect: [true, false],
      range: {
        min: 0,
        max: 100
      }
    });
  }
}

Range slider

<div id="grid-html" class="tab-pane fade" role="tabpanel" aria-labelledby="grid-html-tab">
  <pre><code [highlight]="code"></code></pre>
</div>

<!-- Typescript -->

import { Component, OnInit, AfterViewInit } from '@angular/core';
import noUiSlider from "nouislider";

@Component({
  selector: 'app-sliders',
  templateUrl: './sliders.component.html',
  styleUrls: ['./sliders.component.scss']
})
export class SlidersComponent implements OnInit, AfterViewInit {
  constructor() { }
  ngOnInit() { }

  ngAfterViewInit(){
    var slider2 = document.getElementById("test2");

    noUiSlider.create(slider2, {
      start: [20, 60],
      connect: true,
      range: {
        min: 0,
        max: 100
      }
    });
  }
}