Slider
A Slider component
(code example)
#
Usage<Slider value={0} minimumValue={0} maximumValue={10} onValueChange={() => console.log('value changed')}/>
#
API#
accessibleIf true the component will have accessibility features enabled
boolean
#
activeThumbStyleThe active (during press) thumb style
ViewStyle
#
containerStyleThe container style
ViewStyle
#
disableActiveStylingIf true the Slider will not change it's style on press
boolean
#
disableRTLIf true the Slider will stay in LTR mode even if the app is on RTL mode
boolean
#
disabledIf true the Slider will be disabled and will appear in disabled color
boolean
#
initialMaximumValueuseRange
is true#
Only when Initial maximum value
number
#
initialMinimumValueuseRange
is true#
Only when Initial minimum value
number
#
maximumTrackTintColorThe track color
string
#
maximumValueTrack maximum value
number
#
migrateTemporary prop required for migration to the Slider's new implementation
boolean
#
minimumTrackTintColorThe color used for the track from minimum value to current value
string
#
minimumValueTrack minimum value
number
#
onRangeChangeCallback for onRangeChange. Returns values object with the min and max values
SliderOnRangeChange
#
onResetCallback that notifies when the reset function was invoked
() => void
#
onSeekEndCallback that notifies about slider seeking is finished
() => void
#
onSeekStartCallback that notifies about slider seeking is started
() => void
#
onValueChangeCallback for onValueChange
SliderOnValueChange
#
renderTrackCustom render instead of rendering the track
() => ReactElement | ReactElement[]
#
stepStep value of the slider. The value should be between 0 and (maximumValue - minimumValue)
number
#
testIDThe component test id
string
#
thumbStyleThe thumb style
ViewStyle
#
thumbTintColorThumb color
string
#
trackStyleThe track style
ViewStyle
#
useGapIf true the min and max thumbs will not overlap
boolean
#
useRangeIf true the Slider will display a second thumb for the min value
boolean
#
valueInitial value
number