# npn-slider

> A multi range slider component using Angular v6.0

Latest version **1.3.2** (published 2019-05-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install npn-slider
pnpm add npn-slider
yarn add npn-slider
bun add npn-slider
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2019-05-28 |
| First published | 2018-07-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 569 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | npnm |
| Maintainers | nupin |
| Keywords | multi-range-slider, angular-slider, slider, slider-component, angular-component, angular6 |

## Links

- npm: https://www.npmjs.com/package/npn-slider
- Repository: https://github.com/npnm/NpnSlider
- Homepage: https://npnm.github.io/NpnSlider
- Issues: https://github.com/npnm/NpnSlider/issues
- npm.io page: https://npm.io/package/npn-slider

## Dependencies (1)

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

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.3.2 (latest) — 2019-05-28
- 1.0.0 (multi-range-slider) — 2018-07-29
- 1.3.1 — 2019-05-28
- 1.3.0 — 2019-01-30
- 1.2.1 — 2018-12-10
- 1.2.0 — 2018-09-09
- 1.1.3 — 2018-08-29
- 1.1.2 — 2018-08-29
- 1.1.1 — 2018-08-18
- 1.1.0 — 2018-08-15
- 1.0.1 — 2018-07-29
- 0.0.6 — 2018-07-29
- 0.0.5 — 2018-07-29
- 0.0.4 — 2018-07-29
- 0.0.3 — 2018-07-17
- … 2 more at https://npm.io/package/npn-slider/versions

## README

# [NpnSlider](https://npnm.github.io/NpnSlider/) (A Multi Range Slider Angular Component)

NpnSlider is a reusable range slider component using Angular v6.0. It can be used either as a multi range or a single range slider. By default, it is a multi range slider.

_[View Release Notes](https://github.com/npnm/NpnSlider/releases/tag/v1.3.2)_

## Usage
### Html
```html
<npn-slider [min]="2006" [max]="2020" (onChange)="onSliderChange($event)"></npn-slider>
```
### Attributes
Attributes | Description
-----------|------------
@Input() <br> **min**: number | The minimum value of slider
@Input() <br> **max**: number | The maximum value of slider
@Input() <br> **step**: number | The value at which slider value should change
@Input() <br> **showStepIndicator**: boolean | Whether the step indicator should display or not
@Input() <br> **minSelected**: number | The selected value for slider's left handler
@Input() <br> **maxSelected**: number | The selected value for slider's right handler
@Input() <br> **disabled**: string | To disable the slider. Valid values: _'true'_ or _'disabled'_ or _empty attribute_
@Input() <br> **multiRange**: boolean | To switch between Mutli range and Single range mode. Slider is multi range by default
@Input() <br> **hide-tooltip**: boolean | To hide the tooltip that shows on hover of slider handler. Default value: _'false'_
@Input() <br> **hide-values**: boolean | To hide values displayed at bottom of slider. Default value: _'false'_
@Output() <br> **onChange**: EventEmitter<number[]>() | The event will be fired on change of selected range of values.<br>_Returns: Selected range of values as an array[],_ <br>_On Single range mode, a number array with single value will be returned_

### Example and Sample Code
a) **Import _'NpnSliderModule'_ in your app module**
```ts
import { NpnSliderModule } from "npn-slider";
  
@NgModule({
  imports:[
    ..
    NpnSliderModule
    ..
  ]
})
``` 
b) **Add _'npn-slider'_ in your component html**
```html
<npn-slider [min]="1000" [max]="5000" (onChange)="onSliderChange($event)" [step]="500" [showStepIndicator]="true"></npn-slider>
```
c) **Add a method in your component class to listen for onChange event from slider** 
```ts
/*Method to listen for onChange event from slider*/
onSliderChange(selectedValues: number[]) {
    this._currentValues = selectedValues;
}
```
d) **You done. Run your app. cheers!** _[View Demo](https://npnm.github.io/NpnSlider/)_

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