Have ideas to improve npm?Join in the discussion! »

    circular-slider

    1.3.1 • Public • Published

    circular-slider

    React component to drag a point along a circular path

    Installation

    npm install circular-slider --save

    Example

    import React from 'react';
    import { CircularSlider } from 'circular-slider';
     
    class MyFancyGauge extends React.Component {
      state = {
        angle: 0
      }
      render() {
        return (
          <CircularSlider
            angle={this.state.angle}
            onMove={angle => this.setState({ angle })}
          />
        );
      }
    }

    Options

    Prop Type Default Description
    angle Number 200 Current angle of handle
    arcEnd Number 360 Angle of end of optional arc
    arcStart Number 180 Angle of start of optional arc
    color String darkseagreen Color of handle (and optional needle & arc)
    onMove Function () => {} Handler function (takes new angle as sole argument)
    r Number 100 Radius of the path the slider follows
    showArc Boolean false Renders a circular arc
    showNeedle Boolean true Renders a line from center to handle

    Note: Angles are measured in degrees, clockwise from the positive x-axis.

    Install

    npm i circular-slider

    DownloadsWeekly Downloads

    24

    Version

    1.3.1

    License

    MIT

    Last publish

    Collaborators

    • avatar