React Circular Slider Bar

Enjoy a circular slider bar component for React with no unnecessary dependencies

Key Features:

• Simple to use
• Highly customizable
• No extra dependencies
• Style based: no images / SVGs

Check the demo!

---

Getting started

install

npm install --save-dev react-circular-slider-bar

usage example

import React from 'react';
import CircularSlider from 'react-circular-slider-bar';

const myApp = () => (
  <div>
    ...my awesome stuff...
    <CircularSlider
      r={50}
      trackWidth={10}
      thumbWidth={10}
      onChange={value => console.log(value)}
    />
  </div>
);

export default myApp;

controlled component

<CircularSlider
  value={this.state.value}
  onChange={value => this.setState({ value })}
/>

Props

prop	type	deafult
r	number	80
initialAngle	number	90
value	number	undefined
trackWidth	number	2
trackColor	string	#f5f5dc
arcColor	string	#7985f1
thumbWidth	number	10
thumbColor	string	white
thumbBorderWidth	number	2
thumbBorderColor	string	#cccccc
onChange	func	value => {}