Slider

Usage

<Slider
  size="small"
  value={0.3}
  onValueChange={value => console.log('onValueChange', value)}
  onSlidingComplete={value => console.log('onSlidingComplete', value)}
  onSlidingStart={value => console.log('onSlidingStart', value)}
/>

<Slider
  size="small"
  value={0.3}
  onValueChange={value => console.log('onValueChange', value)}
  onSlidingComplete={value => console.log('onSlidingComplete', value)}
  onSlidingStart={value => console.log('onSlidingStart', value)}
/>

With Range

By using value as an array of [number, number], it will automatically transform into a range slider. The minimum range is the value of the step

<Slider
  value={[30, 60]}
  step={5}
  minimumValue={0}
  maximumValue={100}
  onValueChange={value => console.log('onValueChange', value)}
  onSlidingComplete={value => console.log('onSlidingComplete', value)}
  onSlidingStart={value => console.log('onSlidingStart', value)}
/>

<Slider
  value={[30, 60]}
  step={5}
  minimumValue={0}
  maximumValue={100}
  onValueChange={value => console.log('onValueChange', value)}
  onSlidingComplete={value => console.log('onSlidingComplete', value)}
  onSlidingStart={value => console.log('onSlidingStart', value)}
/>

Partial<{ root: overridewithstyle<sliderbaseprops<tisrange>, rootprops, styleprop<viewstyle>>; unselectedtrack: overridewithstyle<sliderbaseprops<tisrange>, unselectedtrackprops, styleprop<...>>; selectedtrack: overridewithstyle<...>; leftthumb: overridewithstyle<...>; rightthumb: overridewithstyle<...>; }> | undefi...

isRange

Tisrange | undefined

false

size

Number | "small" | "medium" | "large" | undefined

"medium"

value

Value<tisrange> | undefined

step

Number | undefined

minimumValue

Number | undefined

maximumValue

Number | undefined

isDisabled

Boolean | undefined

false

onValueChange

((value: value<tisrange>) => void) | undefined

onSlidingComplete

((value: value<tisrange>) => void) | undefined

onSlidingStart

((value: value<tisrange>) => void) | undefined

testID

String | undefined

Slider

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Usage

With Range

Props

Usage