@jbrtrnd/ngx-chart-slider

NgxChartSlider

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

Compatibility

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

{
    label: string,     // Displayed label
    value: number,     // Step value
    chartData: number  // Step data used to draw bar
}