Necrotizing Pineapple Music
    Wondering what’s next for npm?Check out our public roadmap! »

    react-circular-slider-svg
    TypeScript icon, indicating that this package has built-in type declarations

    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

    46

    Version

    0.1.5

    License

    MIT

    Unpacked Size

    23.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar