react-circular-slider-svg

React Circular Slider

A full-featured circular slider React component, with full TypeScript definitions. See the docs and examples

Features:

• Simple to use
• No dependencies
• Customizable:
  • Start/stop angle
  • Min/max value
  • 0, 1, or 2 handles
• SVG based

Example

Install from npm: npm i react-circular-slider-svg

import CircularSlider from "react-circular-slider-svg";

export default () => {
  const [value1, setValue1] = useState(20);
  const [value2, setValue2] = useState(60);
  return (
    <CircularSlider
      size={200}
      trackWidth={4}
      minValue={0}
      maxValue={100}
      startAngle={40}
      endAngle={320}
      angleType={{
        direction: "cw",
        axis: "-y"
      }}
      handle1={{
        value: value1,
        onChange: v => setValue1(v)
      }}
      handle2={{
        value: value2,
        onChange: v => setValue2(v)
      }}
      arcColor="#690"
      arcBackgroundColor="#aaa"
    />
  );
};