CircularSlider
A slider with circular track and thumb
Installation
- NPM
- Yarn
```bash npm install @rneui/circular-slider ```
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 |