NgxChartSlider

An Angular slider component with bar chart. Demo here : https://jbrtrnd.github.io/ngx-chart-slider

Compatibility

| | | |-------------|--------| | Angular v12 | 0.0.4 | | Angular v13 | 0.0.6 | | Angular v14 | 14.0.1 | | Angular v15 | 15.0.1 | | Angular v16 | 16.0.1 | | Angular v17 | 17.0.1 |

Installation

npm install --save ngx-chart-slider

Import NgxChartSlideModule in your root Angular module :

import { NgxChartSliderModule } from 'ngx-chart-slider';

@NgModule({
    imports: [
        NgxChartSliderModule
    ],
})
export class AppModule {
}

Basic usage

NgxChartSlider works with ngModel and ReactiveForms.

For a simple slider : value will be a single value.

<ngx-chart-slider [(ngModel)]="value"
                  [steps]="steps">
</ngx-chart-slider>

For a range slider : value will be a two-entries array [min, max].

<ngx-chart-slider [(ngModel)]="value"
                  [range]="true"
                  [steps]="steps">
</ngx-chart-slider>

(See documentation to steps input format)

Documentation