Slider

A gesture-driven value slider: the thumb tracks your finger 1:1, with a haptic tick every 10% of travel.

ReanimatedGesture HandlerHapticsSource

Prerequisites

Slider needs a pan gesture on top of Reanimated and haptics.


npx expo install react-native-reanimated expo-haptics react-native-gesture-handler react-native-css


npx @rslab/cli add slider

import { Slider } from '@/components/ui/Slider';

const [volume, setVolume] = useState(0.6);

<Slider value={volume} onValueChange={setVolume} />;

<Slider
  value={volume}

  onValueChange={setVolume}

  onSlidingComplete={(v) => saveVolume(v)}
/>

PropTypeDefault

value

number

-

Controlled, 0 to 1. Scale it yourself for a different range, e.g. value / 100 in, Math.round(v * 100) out.

onValueChange

(value: number) => void

-

Fires continuously while dragging.

onSlidingComplete?

(value: number) => void

-

Fires once, when the finger lifts.

disabled?

boolean

false

Fades the slider and blocks the gesture.

haptic?

boolean

true

Tick every 10% of travel. Set false to mute it.

className?

string

-

Extend or override the outer wrapper.

Gesture-driven, no easing fighting the finger. The thumb's position is set directly from the pan gesture's update, clamped to the track bounds. A finger is already moving the thing, so there's no spring or timing curve on the primary value while you're touching it.
Controlled, but the drag wins during a touch. The value prop syncs the thumb's position on mount and whenever it changes, but during an active drag it's the component's own onValueChange calls that update the parent's value in the first place, so the sync effect just re-applies the position it already set, no visible fight between controlled state and gesture.
Haptic ticks at 10% steps, not every frame. Continuous drag position is rounded into 11 discrete steps, and a tick fires only when you cross into a new one.
Measured track. onLayout gives the real track width, so the thumb's travel and the fill's width are computed rather than hardcoded.

THUMB / TRACK_H: thumb and track thickness
the step multiplier in the drag update, raise it for finer-grained haptic ticks (e.g. * 20 for 5% steps)

See exactly how this works with an RSLAB subscription.