Mobile-friendly Range Slider Component For Angular 6+

ngx-slider is a standalone, mobile compatible slider component for Angular 6+ based on the angularjs-range slider.

angular range slider two handles, range slider angularjs, angular range slider component, react range slider example, material ui range slider, range slider javascript

A Multi-Range Slider Component Using Angular 7+

How to make use of it:

1. To add the scrollbar to your Angular project:

npm install --save @angular-slider/ngx-slider

2. Once installed, add the slider to your app.module.ts:

import { NgxSliderModule } from '@angular-slider/ngx-slider';


   imports: [
export class AppModule {}

3. You can now use the slider component in your application components.

import { Options } from '@angular-slider/ngx-slider';

export class AppComponent {
  value: number = 100;
  options: Options = {
    floor: 0,
    ceil: 200

4. And in the template file app.component.html:

<ngx-slider [(value)]="value" [options]="options"></ngx-slider>

Range Slider Control Component, ngx-slider Plugin/Github, react range slider angular js

See Demo And Download

Official Website(angular-slider): Click Here

This superior jQuery/javascript plugin is developed by angular-slider. For extra Advanced Usages, please go to the official website.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…