# percentage-slider

> JavaScript segments percentages slier

Latest version **1.0.15** (published 2019-11-05) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.15 |
| Published | 2019-11-05 |
| First published | 2019-10-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 166.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alexey Zhmaylik |
| Maintainers | zarwlar |
| Keywords | slider, percentage, percentage slider, javascript slider |

## Links

- npm: https://www.npmjs.com/package/percentage-slider
- Repository: https://github.com/Zarwlar/percentage-slider
- Homepage: https://github.com/Zarwlar/percentage-slider#readme
- Issues: https://github.com/Zarwlar/percentage-slider/issues
- npm.io page: https://npm.io/package/percentage-slider

## 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.0.15 (latest) — 2019-11-05
- 1.0.14 — 2019-10-31
- 1.0.13 — 2019-10-31
- 1.0.12 — 2019-10-30
- 1.0.1 — 2019-10-30
- 1.0.11 — 2019-10-30
- 1.0.0 — 2019-10-30

## README

It's JavaScript percentage slider with the possible of adding and removing handles. (Works in IE11+)<br>
[Demo](https://zarwlar.github.io/percentage-slider/)

Preview
-------------
![](./preview.gif)

Install
-------------

NPM
```
npm install percentage-slider --save
```

Usage
-------------

```javascript
import PercentageSlider from 'percentage-slider';
import 'percentage-slider/package/percentage-slider.css';

const rootElem = document.getElementById('.root');
const slider = new PercentageSlider(rootElem);

const itemData = {
  name: 'handle-1',
  value: 0,
  onChange: (value) => console.log(value),
  color: '#a3d70b'
};

slider.addItem(itemData);

/* Some work ... */

slider.removeItem('handle-1');
```

API
-------------
### PercentageSlider Constructor
- **rootElem** — DOM element inside which will be inserted slider
### PercentageSlider Instance
#### addItem
- **options**:
```
{
  name: String // Name of adding item
  value?: Number // Initial value for handle (from 0 to 100)
  onChange?: (value: Number) => void // Callback which will be called
  color?: String // Color of line. If isn't provided, then line will be had random color.
}
```

#### removeItem
- **name** — Name of removing item

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