@jbrtrnd/ngx-chart-slider

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

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

[range]	boolean	Set the slider mode : In simple mode, value will be the one you provided in the step array In range mode, value will be a 2-entries array. First entry will be the min value, second entry will be the max
[steps]	StepInterface[]	The step array used to build slider. StepInterface : { label: string, // Displayed label value: number, // Step value chartData: number // Step data used to draw bar }
[displayLabels]	'all' | 'none' | 'bounds'	Step labels display mode : all : Display all steps labels none : Hide all steps labels bounds : Display first and last steps labels