Version: Next

Circular Slider

This is a react-native-elements-universe component

Sliders allow users to make selections from a range of values.

Circular Slider
With Thumb (as a slider)
Circular Slider
Without Thumb (as a Progress Indicator)
Arc Slider

Usage#

import { CircularSlider } from 'react-native-elements-universe';
<CircularSlider value={value} onChange={setValue} />;
<CircularSlider value={value} noThumb />;
// 90 deg Arc
<CircularSlider maxAngle={90} />;

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


Props#


Reference#

value#

Value of Slider

TypeDefault
number100

maximumValue#

Maximum value of Slider

TypeDefault
number100

minimumValue#

Minimum value of Slider

TypeDefault
number0

minAngle#

Minimum angle of arc (in degrees)

TypeDefault
number0

maxAngle#

Maximum angle of arc (in degress)

TypeDefault
number359.9

trackRadius#

Radius of Circular Slider

TypeDefault
number100

thumbRadius#

Radius of Circular Slider's thumb

TypeDefault
number12

trackWidth#

Width of Circular Slider

TypeDefault
number5

trackColor#

Color of track

TypeDefault
color stringtheme primary color

thumbColor#

color of thumb

TypeDefault
color stringtrackColor's value

trackTintColor#

Tint Color of track

TypeDefault
color stringtheme.primary.gray5

thumbTextColor#

Marker Text of thumb color

TypeDefault
color stringwhite

thumbTextSize#

Marker Text of thumb Size

TypeDefault
number10

noThumb#

Show no thumb (for progress)

TypeDefault
booleanfalse

showText#

Show slider value at middle of slider

TypeDefault
booleanfalse

showThumbText#

Show value at thumb

TypeDefault
booleanfalse

textColor#

Slider value at middle of slider color

TypeDefault
color stringtrackColor value

textSize#

Slider value at middle of slider font size

TypeDefault
number100