Circle Slider UI component for React
npm install react-circle-slider-hookedCircle Slider Component for React.js
- Simple to use
- No extra dependencies
- Highly customizable
- Defining min and max values
- Defining step size
- Touch support
- Tooltip support
- Style based: no images / SVGs
- To check out live examples visit https://dmitrymorozoff.github.io/react-circle-slider/
Install react-circle-slider using npm.
You can also test the components locally by cloning this repo and doing the following steps:
Install dependencies from package.json:
Runs the app in the development mode.
Open http://localhost:1234 to view it in the browser.
Run linter
Start tests followed by jest
``jsx
import React from "react";
import ReactDOM from "react-dom";
import { CircleSlider } from "react-circle-slider";
export class App extends React.Component {
constructor(props) {
super(props);
this.state = { value: 0 };
}
handleChange = value => {
console.log(Changed value ${value});
this.setState({ value });
};
handleChangeRange = event => {
this.setState({
value: event.target.valueAsNumber,
});
};
render() {
const { value } = this.state;
return
}
}
ReactDOM.render(
`
| Props | Type | Default | Description |
| ------------- | :------- | --------- | -------------------------------------------------------------- |
| size | Number | 180 | size of the slider in px |
| stepSize | Number | 1 | value to be added or subtracted on each step the slider makes. |
| knobRadius | Number | 10 | knob radius in px |
| circleWidth | Number | 5 | width of circle in px |
| progressWidth | Number | 10 | progress curve width in px |
| min | Number | 0 | the minimum value of the slider |
| max | Number | 100 | the maximum value of the slider |
| value | Number | 0 | value |
| circleColor | String | #e9eaee | color of slider |#007aff
| progressColor | String | | color of progress curve |#e9eaee
| knobColor | String | | color of knob |#333
| disabled | Boolean | false | disabled status |
| shadow | Boolean | true | shadow on knob |
| showTooltip | Boolean | false | tooltip |
| valuePrefix | String | NOOP | prefix of value within tooltip |
| valueSuffix | String | NOOP | suffix of value within tooltip |
| tooltipSize | Number | 32 | size of tooltip |
| tooltipColor | String | | color of tooltip |onChange` is triggered. |
| onChange | Function | NOOP | when slider is moved,
- [ ] Keyboard support
- [ ] Mouse scroll support
- [ ] Accessibility
- For bugs and feature requests, please create an issue
- Lint and test your code
- Pull requests and â stars are always welcome
MIT