# nj-range-slider

> This is a draggable UI slider control to enable the user to select a value from the given range and see the selected value.

Latest version **1.0.0** (published 2020-04-27) · 0 weekly downloads

## Install

```sh
npm install nj-range-slider
pnpm add nj-range-slider
yarn add nj-range-slider
bun add nj-range-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.0 |
| Published | 2020-04-27 |
| First published | 2020-04-27 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 10 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Namrata Jobanputra |
| Maintainers | j.namrata |

## Links

- npm: https://www.npmjs.com/package/nj-range-slider
- npm.io page: https://npm.io/package/nj-range-slider

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.13.1
- [webpack](https://npm.io/package/webpack.md) ^4.43.0
- [css-loader](https://npm.io/package/css-loader.md) ^3.5.3
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.9.0
- [style-loader](https://npm.io/package/style-loader.md) ^1.2.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.9.5

## Recent versions

- 1.0.0 (latest) — 2020-04-27

## README

# nj-range-slider

This is a draggable UI slider control to enable the user to select a value from the given range and see the selected value. Apart from it being more visually appealing, it's also more useful compared to the input range control of HTML5 since it also shows value selected by the user in a floating bubble.

## Getting Started

Follow the following steps for using it

### Install the package

```
npm install nj-range-slider
```

### Import NjRangeSlider component in the component where you would like to use

```
import NjRangeSlider from 'nj-range-slider';
```

### Use it in your JSX as seen in the following example.

It required these 5 properties: currentValue, min, max, step & the callback function onSliderValueChange

```
onSliderValueChange(newValue) {
  //alert(newValue);
}

render() {
  return (<NjRangeSlider
    currentValue="25"
    min="5"
    max="100"
    step="5"
    onSliderValueChange={this.onSliderValueChange.bind(this)}/>
  );
}
```

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