Need private packages and team management tools?Check out npm Teams »

react-circular-slider-svg

0.1.5 • Public • Published

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}
      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"
    />
  );
};

Install

npm i react-circular-slider-svg

DownloadsWeekly Downloads

63

Version

0.1.5

License

MIT

Unpacked Size

23.6 kB

Total Files

8

Last publish

Collaborators

  • avatar