ng2-nouislider

The ng2-nouislider component is a wrapper around the nouislider library. You can pass additional configuration settings via the [config] @Input.

For a full list of available options (such as step, orientation, etc.), refer to the official nouislider documentation.

Install ng2-nouislider and its peer dependency nouislider using npm.

Requirement: Angular 14 or higher.

npm i nouislider ng2-nouislider

To use the component in your Angular application, import NouisliderModule into your Angular module.

import { NouisliderModule } from 'ng2-nouislider';

Import the base Nouislider CSS in your global styles file to ensure the slider renders correctly.

@import "nouislider/dist/nouislider.css";

The NouiFormatter interface is used to bridge the gap between the raw string values used by noUiSlider and the numeric values used by your Angular application.

By default, the component uses DefaultFormatter, which handles basic float parsing and fixed-point string conversion. If you need specific currency symbols, units (like % or px), or specific decimal precision, you should provide your own implementation via the [format] input on the NouisliderComponent or within the [config] object.

To use the NouisliderComponent within your Angular application, you must import the NouisliderModule into your component's module or standalone component imports array. This module exports the NouisliderComponent, making it available for use in your templates.

import { NouisliderModule } from 'ng2-nouislider';

@NgModule({
  imports: [
    NouisliderModule,
    // ... other imports
  ],
  // ...
})
export class AppModule { }

Integrate the slider with Angular Reactive Forms by using the [formControl] directive. This allows the slider to participate in form validation and state management.

// In your component class
this.form1 = this.formBuilder.group({ single: [10] });

<!-- In your template -->
<form [formGroup="form">
  <nouislider [min="0" [max="20" [step="0.5" [formControl="form.controls.single"></nouislider>
</form>

You can bind the slider value to a component property using [(ngModel)] for two-way data binding.

<nouislider [connect="true" [min="0" [max="15" [(ngModel)]="someRange"></nouislider>

To control how values are converted between the slider's internal string representation and your application's numeric values, implement the NouiFormatter interface.

• to(value: number): string: Converts a numeric value to a string for display on the slider.
• from(value: string): number: Converts a string value from the slider back into a number for your application logic.

import { NouiFormatter } from 'ng2-nouislider';

export class MyCustomFormatter implements NouiFormatter {
  to(value: number): string {
    return `$${value.toFixed(2)}`;
  }

  from(value: string): number {
    return parseFloat(value.replace('$', ''));
  }
}