How To Use Ngx-slider With A Different Type Of Style In Angular

In this article, we are going to see how to use ngx-slider in angular and what options are available in ngx-slider. Please follow the below steps.

You will find an overview of using the slider directive, and following the navigation links, you can explore the public API portion of the library.

The public API is made up of all declarations made available when importing the ngx-slider package, for instance, the Options class.

First, we need to install the following npm reference for ngx-slider.

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

Once you've installed the package please copy the below code to the app.module.ts file.

import { NgModule } from '@angular/core';  
import { BrowserModule } from '@angular/platform-browser';  
import { AppRoutingModule } from './app-routing.module';  
import { AppComponent } from './app.component';  
import { NgxSliderModule } from "@angular-slider/ngx-slider";  

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxSliderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Please copy the app.component.ts & app.component.html file codes below.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngx-slider';
  value: number = 123;
  options: Options = {
    floor: 0,
    ceil: 250
  };
}

app.component.html

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

Single slider

Here are the options; we are going to set the range from 0 to 250 and set the range value is 123. this is one of the single sliders. Once you add the changes please run the application using ng-serve --open the http://localhost:4200 will be open and changes will be reflected in the browser.

The slider is available in more types of options; let's see others.

Range slider

The range slider set the minimum and maximum between the range value in the ngx-slider. Here I have set the minimum value as 50 and value is 70 and the range is 0 to 100.

value: number = 50;  
maxvalue: number = 70;  
options: Options = {  
    floor: 0,  
    ceil: 100  
};  

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

Slider with ticks

The slider with ticks sets different types of ticks like small, medium, average, large, and extra-large and the slider position is set number 5.

value: number = 5;  
options: Options = {  
    showTicksValues: true,  
    stepsArray: [{  
        value: 1,  
        legend: "Small"  
    }, {  
        value: 2  
    }, {  
        value: 3,  
        legend: "Medium"  
    }, {  
        value: 4  
    }, {  
        value: 5,  
        legend: "Average"  
    }, {  
        value: 6  
    }, {  
        value: 7,  
        legend: "Large"  
    }, {  
        value: 8  
    }, {  
        value: 9,  
        legend: "Extra Large"  
    }]  
};   

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

Customized slider

The customized slider is usually used within a big presentation, a custom slideshow is a sequence of slides that expresses some exact idea or represents a particular subtopic.

Please check the below codes for setting options.

minValue: number = 200;
maxValue: number = 300;
options: Options = {
    floor: 0,
    ceil: 500,
    translate: (value: number, label: LabelType): string => {
        switch (label) {
            case LabelType.Low:
                return "<b>Min price:</b> $" + value;
            case LabelType.High:
                return "<b>Max price:</b> $" + value;
            default:
                return "$" + value;
        }
    }
};

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

Slider with custom style

In the custom style we able to change the slider style manually. Here I have added some of the styles app.components.scss. showTicks set true. The range between was a show with ticks. Please check the changes in the below image.

value: number = 10;
highValue: number = 90;
options: Options = {
    floor: 0,
    ceil: 100,
    step: 10,
    showTicks: true
};

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

app.component.scss

::ng-deep {  
    .custom-slider .ngx-slider .ngx-slider-bar {  
        background: #ffe4d1;  
        height: 2px;  
    }  
    .custom-slider .ngx-slider .ngx-slider-selection {  
        background: orange;  
    }  
    .custom-slider .ngx-slider .ngx-slider-pointer {  
        width: 8px;  
        height: 16px;  
        top: auto; /* to remove the default positioning */  
        bottom: 0;  
        background-color: #333;  
        border-top-left-radius: 3px;  
        border-top-right-radius: 3px;  
    }  
    .custom-slider .ngx-slider .ngx-slider-pointer:after {  
        display: none;  
    }  
    .custom-slider .ngx-slider .ngx-slider-bubble {  
        bottom: 14px;  
    }  
    .custom-slider .ngx-slider .ngx-slider-limit {  
        font-weight: bold;  
        color: orange;  
    }  
    .custom-slider .ngx-slider .ngx-slider-tick {  
        width: 1px;  
        height: 10px;  
        margin-left: 4px;  
        border-radius: 0;  
        background: #ffe4d1;  
        top: -1px;  
    }  
    .custom-slider .ngx-slider .ngx-slider-tick.ngx-slider-selected {  
        background: orange;  
    }  
}

Vertical slider

The vertical slider mostly changes the angle with vertical position. Here we need to set options; vertical is true and changes will be reflected in the screen.

value: number = 50;  
options: Options = {  
    floor: 0,  
    ceil: 100,  
    step: 10,  
    vertical: true  
};  

<div style="height: 150px;">  
   <ngx-slider [(value)]="value" [options]="options"></ngx-slider>  
</div>

I hope this article is most helpful for you.