react-double-range-slider

react-double-range-slider

A customizable React slider used for getting range of values
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
3. Usage
   • Props
4. Contributing
5. Contact

Built With

(back to top)

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
  

(back to top)

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

(back to top)

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

(back to top)

Contact

Zbyszko Sobecki - @sobecki_zbyszko - [e-mail]

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

(back to top)