Package Exports

@busshi/react-range-slider
@busshi/react-range-slider/src/index.tsx

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@busshi/react-range-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Props	Type	Default value	Required / Optional
value	number		required
onChange	(e: React.ChangeEvent) => void		required
min	number	0	optional
max	number	100	optional
step	number	5	optional

Custom style properties

Props	Type	Default value	Required / Optional
width	string	100px	optional
height	string	3px	optional
borderRadius	string	50%	optional
background	string	#eee	optional
dotColor	string	#306FDB	optional
dotSize	string	12px	optional
activeDotSize	string	15px	optional

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;