CircularSlider

A slider with circular track and thumb

Installation

NPM

```bash npm install @rneui/circular-slider ```

Yarn

yarn add @rneui/circular-slider

Usage

import { CircularSlider } from "@rneui/circular-slider";

<CircularSlider value={value} onChange={setValue} />

<CircularSlider value={value} noThumb />

<CircularSlider maxAngle={90} />

Either use percentage (0 to 100) in value or specify maximumValue & minimumValue

Props

Name	Type	Default	Description
maxAngle	number	359.9	Max angle in radians
maximumValue	number	100	Maximum value of the slider
minAngle	number	0	Min angle in radians
minimumValue	number	0	Minimum value of the slider
noThumb	boolean	false	Show thumb
onChange	(value: number) => void	(x) => x	Handler for the value change
showText	boolean	false	show text on center of slider
showThumbText	boolean	false	show text on thumb
textColor	string		color for text on center of slider
textSize	number	80	text size for text on center of slider
thumbColor	string		color of the slider thumb
thumbRadius	number	12	Radius of the slider thumb
thumbTextColor	string	white	color of thumb text
thumbTextSize	number	10	text size of thumb text
trackColor	string		color of the slider track
trackRadius	number	100	Radius of the slider track
trackTintColor	string		color of the slider background
trackWidth	number	5	Width of the slider track
value	number	0	value of the slider