react-range-slider

A range slider component for React

View the demo

Installation

npm i @gilbarbara/react-range-slider

Usage

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 <RangeSlider axis="x" x={x} onChange={handleChange} />;
}

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

onAfterChange {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 for more information.

<RangeSlider
  ...
  styles={{
    height: '10px',
    trackBorderRadius: 0,
  }}
/>

License

MIT