Skip to main content
Version: 4.0.0-beta.0

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