Angular 9|8|7 Range & Drag Slider Bar using ng5-slider

Angular tutorial for implementation of Drag Button Slider using the ng5-slider NPM module package.

Slider or Range Slider plays an important role to add a custom control in page for users to select values by simply dragging a button on the scale provided. This type of control can be used to select a value or select a range by dragging two slider buttons.

In this article, we will learn How to add a Range Slider in Angular application using an awsome module the ng5-slider. We will discuss its various available features and customize its style according to our needs by using CSS styles.

Angular 9|8|7 Range & Drag Slider Bar using ng5-slider

Let’s get started!

Install & Configure the ng5-slider package

To use slider first, install the ng5-slider package in your Angular application by executing below NPM command in the terminal at project root:

$ npm install --save ng5-slider
Adding in App Module

After installation, open the app.module.ts file to import the Ng5SliderModule then add in imports array as shown below:

// app.module.ts
import { Ng5SliderModule } from 'ng5-slider';
 
...
 
@NgModule({
   ...
   imports: [
     ...
     Ng5SliderModule,
    ...
   ],
   ...
})
export class AppModule {}

Adding the Slider

The ng5-slider component directive is added in the HTML component template to create a slider with [options] required property as shown below:

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

In the component class, import the Options class from ng5-slider. It is used to add configuration for our Slider.

import { Options } from 'ng5-slider';
...
 
@Component({...})
export class AppComponent {
  value: number = 100;
  options: Options = {
    floor: 0,
    ceil: 200
  };
}

By adding the above code, our basic slider will be created as shown below:

Angular 9|8|7 Range &#038; Drag Slider Bar using ng5-slider

This is the basic implementation, you can check more advanced implementation in guide documentation and demo page.

Input Properties and Output Events

Following are Input and Output properties available for ng5-slider component directive:

<ng5-slider
  [(value)]="<number>"
  [(highValue)]="<number>"
  [options]="<options object>"
  [manualRefresh]="<event emitter>"
  [triggerFocus]="<event emitter>"
  (userChangeStart)="<event handler>"
  (userChange)="<event handler>"
  (userChangeEnd)="<event handler>"
  (valueChange)="<event handler>"
  (highValueChange)="<event handler>"
></ng5-slider>

Options

To configure slider's various properties we can import the Options class in component to manipulates its view and usability. All options and its usage is well explained in the documentation here.

Customize Style for Ng5Slider

We can customize the slider style by simply adding a class on the wrapper as shown below:

Angular 9|8|7 Range &#038; Drag Slider Bar using ng5-slider

<div class="custom-slider">
  <ng5-slider [(value)]="minValue" [(highValue)]="maxValue" [options]="options"></ng5-slider>
</div>

Then add the following CSS in the component Style file:

// We need to use ::ng-deep to overcome view encapsulation
::ng-deep {
    .custom-slider .ng5-slider .ng5-slider-bar {
      background:#0084FF;
      height: 5px;
    }
  
    .custom-slider .ng5-slider .ng5-slider-pointer {
        width: 48px;
        height: 28px;
      top: auto; /* to remove the default positioning */
      bottom: 0;
      background-image: url(https://www.freakyjolly.com/wp-content/plugins/phastpress/phast.php/https-3A-2F-2Fwww.freakyjolly.com-2Fwp-2Dcontent-2Fuploads-2F2017-2F08-2Fcropped-2Dfjlogo2.png/service=images/width=248/height=140/cacheMarker=1569606953-2D8457/token=9b3bc6a406ae60d6/__p__.png);
      background-size: cover;  
      background-color:#ffffff;
      top: -10px;
      box-shadow:         3px 3px 5px 6px #ccc;
    }
  
    .custom-slider .ng5-slider .ng5-slider-pointer:after {
      display: none;
    }
  
    .custom-slider .ng5-slider .ng5-slider-bubble {
      bottom: 14px;
    }
  
    .custom-slider .ng5-slider .ng5-slider-limit {
      font-weight: bold;
      color: blue;
    }
  
    .custom-slider .ng5-slider .ng5-slider-tick {
      width: 5px;
      height: 10px;
      margin-left: 4px;
      border-radius: 0;
      background: #001324;
      top: -1px;
    }
  }

 

 

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments