ngx-progress-slider

Elevate your Angular applications with the ngx-progress-slider package – a sleek and customizable progress slider component designed to enhance user interactions and visualize progress seamlessly.

Getting Started

ngx-progress-slider provides slider component powered by Angular, so you don't need to handle slider events at your end.

Usage Steps

Installation

Run npm i ngx-progress-slider to install the package.

Imports

If you want to use this component in a standalone component, then add NgxProgressSliderComponent in imports array of that standalone component. Else add NgxProgressSliderComponent in the imports array of the module

Usage

Add <ngx-progress-slider [config]="sliderConfig" [intervals]="intervals"></ngx-progress-slider> in the html template

Customizations

NgxProgressSliderComponent requires few properties to customize the slider. Below are the properties to configure

• activeColor - Color code of line which is covered

• inActiveColor - Color code of line which is uncovered

• activeImagePath - Image path of active image path (Required)

• inActiveImagePath - Image path of inactive image path (Required)

• sliderValue - By default set to 0, can be used to preset slider (Required)

• disabled - By default set to false, can be used to disable slider

• intervals - By default set to 4, are the number of intervals slider is to be divided

Example

<ngx-progress-slider
  activeImagePath="assets/img/icons/active-circle.svg"
  inActiveImagePath="assets/img/icons/inactive-circle.svg"
  activeColor="#ffffff"
  inActiveColor="#777777"
  [intervals]="4"
  [sliderValue]="sliderValue">
</ngx-progress-slider>

NOTE

If the package is throwing any error, you need to add NO_ERRORS_SCHEMA to the module where NgxProgressSliderComponent is imported.

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NgxProgressSliderComponent } from "ngx-progress-slider";
@NgModule({
  declarations: [
    ...
  ],
  imports: [NgxProgressSliderComponent],
  exports: [...],
  providers: [...],
  schemas: [NO_ERRORS_SCHEMA],
})
export class ExampleModule {}

Further help

To get more help or for any suggestions, please drop a mail on [email protected].