open-index/open-npm huggingface dataset:
npm package: @jbrtrnd/ngx-chart-slider
Description: An Angular slider component with bar chart. <br /> Demo here : [https://jbrtrnd.github.io/ngx-chart-slider](https://jbrtrnd.github.io/ngx-chart-slider/)
Author: Jules BERTRAND
Latest version: 20.0.1

# 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>