Slider

A range input that lets users select a numeric value within a defined min/max range.

Import

tsx

import { Slider } from '@tac-ui/native';

Interactively configure the Slider props below.

Disabled

tsx

<Slider defaultValue={50} min={0} max={100} />

The base slider renders a styled range input with a filled track and an animated thumb that scales on press interactions.

tsx

<Slider defaultValue={50} min={0} max={100} />

Set filled={false} to render the track as a flat secondary color without the progressive fill, useful when the position alone conveys the value.

tsx

<Slider defaultValue={50} min={0} max={100} filled={false} />

Pass label to render a heading above the track. Enable showValue to display the current numeric value aligned to the right of the label in real time.

Volume

tsx

<Slider
  label="Volume"
  showValue
  defaultValue={40}
  min={0}
  max={100}
  step={1}
/>

Prop	Type	Default	Description
label	string	-	Label displayed above the slider.
showValue	boolean	false	Displays the current value next to the label.
filled	boolean	true	Fills the track up to the current value with the primary color.
value	number	-	Controlled current value.
defaultValue	number	-	Default value for uncontrolled usage.
min	number	0	Minimum value of the range.
max	number	100	Maximum value of the range.
step	number	1	Increment step between values.
onChange	(value: number) => void	-	Called when the value changes.
onChangeEnd	(value: number) => void	-	Called when the user releases the thumb.
disabled	boolean	false	Disables the slider when true.
style	ViewStyle	-	Additional styles applied to the container.