1.3.1 • Published 7 years ago
circular-slider v1.3.1
circular-slider
React component to drag a point along a circular path
Installation
npm install circular-slider --saveExample
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.