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'; Component state = angle: 0 { return <CircularSlider = = /> ; }
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.