React-double-range-slider NPM

Built With

Getting Started

To use this package you just have to install it from npm.

Installation

Install library on your device

npm
```
npm install react-double-range-slider
```
yarn
```
yarn add react-double-range-slider
```

Usage

To use this component you have to import RangeSlider from library. Additionally it is recommended to also import default styles.

import { RangeSlider } from "react-double-range-slider";
import "react-double-range-slider/dist/cjs/index.css";

This will probably change in the future to improve user experience.

For example, please refer to the Code sandbox

Props

Name	Type	Required	Default	Description
value	{min: `number`, max: `number`} \| Array `string`	Yes		Values used in array
onChange	(x: `any`) => `void`;	Yes	(x: `any`)=> { min: `string`, max: `string`, minIndex: `number`, maxIndex: `number` }	Callback function called when the value changes
formatter	(value: `number` \| `string`) => `string`;	No	(value) => value;	Function used to change label format
from	`number` \| `string`	No	value.min \| valuevalue.length-1	Default start position
to	`number` \| `string`	No	value.max \| value0	Default end position
tooltipVisibility	`"always"` \| `"hover"` \| `"never"`	No	`"always"`	Tooltip display type
tooltipPosition	`"under"` \| `"over"`	No	`"over"`	Tooltip position
hasSteps	`boolean`	No	`false`	Determines if slider should have steps

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!