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 | value[value.length-1] | Default start position | | to | number | string | No | value.max | value[0] | 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!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Contact

Zbyszko Sobecki - @sobecki_zbyszko - [email protected]

Project Link: https://github.com/dziwuj/react-double-range-slider