@busshi/react-range-slider v1.0.1

React-Range-Slider

A custom React Range Slider component reusable without extra dependency (only React dependencies).

Installation

yarn add @busshi/react-range-slider or npm install @busshi/react-range-slider

Custom range slider properties

Custom style properties

Note

Colors can be passed as prop as hex (#FFF), rgb (rgb(255, 255, 255)) or as noun (white).

Usage

import RangeSlider from "@busshi/react-range-slider";
import { useState } from "react";

function App() {
  const [value, setValue] = useState(0);

  return (
    <RangeSlider
      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
        setValue(+e.target.value);
      }}
      min={0}
      max={100}
      step={5}
      value={value}
      width="100px"
      height="3px"
      borderRadius="50%"
      background="#eee"
      dotColor="#306FDB"
      dotSize="12px"
      activeDotSize="15px"
    />
  );
}

export default App;