# @jbrtrnd/ngx-chart-slider

> An Angular slider component with bar chart. Demo here : [https://jbrtrnd.github.io/ngx-chart-slider](https://jbrtrnd.github.io/ngx-chart-slider/)

Latest version **20.0.1** (published 2025-09-15) · 0 weekly downloads

## Install

```sh
npm install @jbrtrnd/ngx-chart-slider
pnpm add @jbrtrnd/ngx-chart-slider
yarn add @jbrtrnd/ngx-chart-slider
bun add @jbrtrnd/ngx-chart-slider
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 20.0.1 |
| Published | 2025-09-15 |
| First published | 2021-10-06 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 72 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jules BERTRAND |
| Maintainers | jbrtrnd |

## Links

- npm: https://www.npmjs.com/package/@jbrtrnd/ngx-chart-slider
- npm.io page: https://npm.io/package/@jbrtrnd/ngx-chart-slider

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 20.0.1 (latest) — 2025-09-15
- 19.0.1 — 2025-06-12
- 18.0.1 — 2024-10-10
- 17.0.1 — 2024-10-09
- 16.0.1 — 2023-09-01
- 15.0.1 — 2023-08-31
- 14.0.1 — 2023-08-30
- 0.0.6 — 2023-08-30
- 0.0.5 — 2023-08-30
- 0.0.4 — 2022-01-26
- 0.0.3 — 2021-10-14
- 0.0.2 — 2021-10-06
- 0.0.1 — 2021-10-06

## README

# NgxChartSlider

An Angular slider component with bar chart.
<br />
Demo here : [https://jbrtrnd.github.io/ngx-chart-slider](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 :
<br />
``value`` will be a single value.
```
<ngx-chart-slider [(ngModel)]="value"
                  [steps]="steps">
</ngx-chart-slider>
```

For a range slider :
<br />
``value`` will be a two-entries array `[min, max]`.
```
<ngx-chart-slider [(ngModel)]="value"
                  [range]="true"
                  [steps]="steps">
</ngx-chart-slider>
```

(See [documentation](#Documentation) to `steps` input format)

## Documentation

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

---
_Source: https://npm.io/package/@jbrtrnd/ngx-chart-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._