Skip to main content
Version: 4.0.0-rc.1

CircularSlider

A slider with circular track and thumb

Installation

```bash npm install @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

NameTypeDefaultDescription
maxAnglenumber359.9Max angle in radians
maximumValuenumber100Maximum value of the slider
minAnglenumber0Min angle in radians
minimumValuenumber0Minimum value of the slider
noThumbbooleanfalseShow thumb
onChange(value: number) => void(x) => xHandler for the value change
showTextbooleanfalseshow text on center of slider
showThumbTextbooleanfalseshow text on thumb
textColorstringcolor for text on center of slider
textSizenumber80text size for text on center of slider
thumbColorstringcolor of the slider thumb
thumbRadiusnumber12Radius of the slider thumb
thumbTextColorstringwhitecolor of thumb text
thumbTextSizenumber10text size of thumb text
trackColorstringcolor of the slider track
trackRadiusnumber100Radius of the slider track
trackTintColorstringcolor of the slider background
trackWidthnumber5Width of the slider track
valuenumber0value of the slider