https://github.com/gilbarbara/react-range-slider
A range slider component for React
https://github.com/gilbarbara/react-range-slider
Last synced: 9 months ago
JSON representation
A range slider component for React
- Host: GitHub
- URL: https://github.com/gilbarbara/react-range-slider
- Owner: gilbarbara
- License: mit
- Created: 2019-02-22T04:19:08.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2025-01-15T19:09:41.000Z (12 months ago)
- Last Synced: 2025-04-10T14:34:28.166Z (9 months ago)
- Language: TypeScript
- Homepage: https://codesandbox.io/s/github/gilbarbara/react-range-slider/tree/main/demo
- Size: 730 KB
- Stars: 5
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-range-slider
[](https://badge.fury.io/js/%40gilbarbara%2Freact-range-slider) [](https://github.com/gilbarbara/react-range-slider/actions/workflows/main.yml) [](https://codeclimate.com/github/gilbarbara/react-range-slider/maintainability) [](https://codeclimate.com/github/gilbarbara/react-range-slider/test_coverage)
A range slider component for React
View the [demo](https://codesandbox.io/s/github/gilbarbara/react-range-slider/tree/main/demo)
## Installation
```sh
npm i @gilbarbara/react-range-slider
```
## Usage
```typescript
import React, { useState } from 'react';
import RangeSlider, { RangeSliderPosition, RangeSliderProps } from '@gilbarbara/react-range-slider';
export default function App() {
const [x, setX] = useState(10);
const handleChange = (position: RangeSliderPosition, props: RangeSliderProps) => {
setX(position.x);
};
return ;
}
```
## Props
**axis** {'x' | 'y' | 'xy'} ▶︎`x`
Type of slider
**x** {number}
Use with axis `x` or `xy`
**xMin** {number} ▶︎`0`
Min value of X
**xMax** {number} ▶︎`100`
Max value of X
**xStep** {number} ▶︎`1`
Step of X
**y** {number}
Use with axis `y` or `xy`
**yMin** {number} ▶︎`0`
Min value of Y
**yMax** {number} ▶︎`100`
Max value of Y
**yStep** {number} ▶︎`1`
Step of Y
**onAfterEnd** {function}
It is called after the slider changed (click or drag)
**onChange** {function}
It is called for each step
**onDragEnd** {function}
It is called after dragging the thumb
## Customization
You can customize the UI with a `styles` prop.
Check out [styles.ts](src/styles.ts) for more information.
```jsx
```
## License
MIT