🕹️ react-circle-slider

Circle Slider Component for React.js

!Imgur

⚡ Functionality

- 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

Examples

- To check out live examples visit https://dmitrymorozoff.github.io/react-circle-slider/

🚀 Getting started

Install react-circle-slider using npm.

$3

You can also test the components locally by cloning this repo and doing the following steps:

🔲 NPM-scripts

Install dependencies from package.json:

$3

Runs the app in the development mode.

Open http://localhost:1234 to view it in the browser.

$3

Run linter

$3

Start tests followed by jest

$3

Usage

``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(, document.getElementById("root"));
`

📃 Props

| 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 |
| progressColor | String | #007aff | color of progress curve |
| knobColor | String | #e9eaee | color of knob |
| 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 | #333 | color of tooltip |
| onChange | Function | NOOP | when slider is moved, onChange` is triggered. |

💡 Todo

- [ ] Keyboard support
- [ ] Mouse scroll support
- [ ] Accessibility

💻 Contributing

- For bugs and feature requests, please create an issue
- Lint and test your code
- Pull requests and ⭐ stars are always welcome

License

MIT