https://github.com/tythe-org/circular-slider
React component to drag a point along a circular arc
https://github.com/tythe-org/circular-slider
circular component react slider
Last synced: 4 months ago
JSON representation
React component to drag a point along a circular arc
- Host: GitHub
- URL: https://github.com/tythe-org/circular-slider
- Owner: tythe-org
- License: mit
- Created: 2017-07-08T15:57:32.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-09-20T07:22:11.000Z (almost 8 years ago)
- Last Synced: 2025-08-09T04:54:14.796Z (11 months ago)
- Topics: circular, component, react, slider
- Language: JavaScript
- Size: 16.6 KB
- Stars: 12
- Watchers: 0
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# circular-slider
React component to drag a point along a circular path
## Installation
```shell
npm install circular-slider --save
```
## Example
```jsx
import React from 'react';
import { CircularSlider } from 'circular-slider';
class MyFancyGauge extends React.Component {
state = {
angle: 0
}
render() {
return (
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.