# rr-slider

> A range slider component for React.

Latest version **1.0.0** (published 2016-05-17) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2016-05-17 |
| First published | 2016-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 115 |
| Author | Jyoti Puri |
| Maintainers | jyotipuri |
| Keywords | browser, react, slider, range-slider, range-input, components, widget, javascript, react-component |

## Links

- npm: https://www.npmjs.com/package/rr-slider
- Repository: https://github.com/jpuri/react-range-slider
- Homepage: https://github.com/jpuri/react-range-slider#readme
- Issues: https://github.com/jpuri/react-range-slider/issues
- npm.io page: https://npm.io/package/rr-slider

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2016-05-17
- 0.0.3 — 2016-05-16
- 0.0.2 — 2016-05-16

## README

# React Range Slider

An elegant range slider component for React.
[Demo Page](http://jpuri.github.io/react-range-slider/).

## Installing

The library is available as npm package.

`npm install rr-slider`

## Using The component
The component is easy to use. A simple use can be when no properties are provided to the component, it takes default value of props:

```
import React from 'react';
import styles from './styles.css';
import RangeSlider from 'r-slider';

const MyPage = () =>its used to initialize
  <div className={ styles.container }>
    <RangeSlider />
  </div>;
```
IMPORTANT: Please make sure that you include styles from `RRSlider.css`. The file is available in /lib folder in the repository and also part of npm package.
In case you are using webpack for build, please make sure that you do **not** use ExtractTextPlugin to load this css file.

![Small cart in header](http://i.imgur.com/r7Ot84g.gif)

An example passing the range of values and step to the component:
```
import React from 'react';
import styles from './styles.css';
import RangeSlider from 'r-slider';

const MyPage = () =>
  <div className={ styles.container }>
    <RangeSlider min={ 20 } max={ 100 } step={ 5 } />
  </div>;
```

More advanced example of a controlled range slider component:
```
import React from 'react';
import styles from './styles.css';
import RangeSlider from 'r-slider';

const MyPage = (value, onChange) =>
  <div className={ styles.container }>
    <RangeSlider value={ value }
      onChange={ onChange }
      min={ 20 }
      max={ 100 }
      step={ 5 }
    />
  </div>;
```

## List of properties supported
| Option | Description |
| ------ | ----------- |
| id   | id of the root div element |
| name | name of the root div element |
| min    | minimum value in the range |
| max    | maximum value in the range |
| step    | amount by which the position of slider will change in one movement |
| defaultValue    | it is used to initialize uncontrolled components, it is an object containing 2 keys: start, end |
| value    | it is used to set value in a controlled component, it is also an object containing 2 keys: start, end  |
| onChange    | the function is executed whenever the value changes |
| afterChange    | the function is executed after the user has stopped moving the slider |
| disabled    | property used to disable component, disable component can not even receive focus |
| readOnly    | property used to make component readOnly, it can still be focused |
| tabIndex    | this is used to set the tabIndex of 2 handles which are moved to change value of slider |
| rootClassName    | class applied to root div element |
| handleClassName    | class applied to movable handles |
| trackClassName    | class applied to track |
| highlightedTrackClassName    | class applied to highlighted portion of track between handles |

## Custom styling
Styling of Range Slider is highly customizable. Properties rootClassName, handleClassName, trackClassName, highlightedTrackClassName described above can be used for custom styling of the component.
By default the component uses a set of classes for styling, which is not used if a class for styking is passes in props. For example see code for docs page.

## Device support
Range Slider is responsive to different sizes and resolutions. Its responsive to mouse, keyboard and touch events.

## Future plans
Adding more sliders component like vertical slider, range input with single handle, etc
[motivation](https://jqueryui.com/slider/).

## License
MIT.

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