React component to drag a point along a circular path
npm install circular-slider --saveimport 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 })}
/>
);
}
}| 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 |
| arcThickness | Number | 1 | Thickness of the arc in pixels |
| color | String | darkseagreen | Main color for handle, needle & arc |
| draggerColor | String | color | Specific color for handle |
| draggerRadius | String | 8 | 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.
