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.