Slider

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/slider.json

Then run npx expo install --fix so react-native-gesture-handler, react-native-reanimated match your Expo SDK. Files land in components/goodui-native/slider.

• •Wrap the app in GestureHandlerRootView and ThemeProvider.

Usage

import { useState } from "react";
import { RangeSlider, Slider } from "@/components/goodui-native/slider/slider";

export function Filters() {
  const [distance, setDistance] = useState(10);
  const [price, setPrice] = useState<[number, number]>([40, 180]);
  return (
    <>
      <Slider accessibilityLabel="Distance" value={distance} onValueChange={setDistance} min={1} max={50} formatValue={(v) => `${v} km`} />
      <RangeSlider
        accessibilityLabel="Price"
        value={price}
        onValueChange={setPrice}
        onSlidingComplete={(range) => refetch(range)}
        min={0}
        max={300}
        step={10}
        formatValue={(v) => `$${v}`}
      />
    </>
  );
}

When to use

Examples

<Slider accessibilityLabel="Tip" defaultValue={15} min={0} max={30} step={5} showTicks showValue="always" formatValue={(v) => `${v}%`} />

<Slider size="sm" tone="warning" step={0} showValue="never" accessibilityLabel="Brightness" />

API reference

Motion and haptics

• •Dragging: the thumb tracks the finger 1:1 (grabbing it keeps the finger's offset, grabbing the track brings the nearest thumb to the finger) and scales to 1.08.
• •Release: the thumb settles onto the step the value already shows on the snappy spring.
• •Tapping the track moves the nearest thumb there on the smooth spring.
• •The value bubble grows out of the top of the thumb while dragging (showValue 'drag' appears from nothing, 'always' grows from 84 %).
• •Outside value changes move the thumbs on the smooth spring.
• •Reduced motion: no thumb or bubble scaling (the bubble simply appears), release and outside changes jump to the value; dragging still follows the finger.

• •Haptic: select each time the value crosses a tick (with showTicks)
• •Haptic: select when the value reaches min or max

• •The gesture and all thumb, fill and bubble motion run on the UI thread.
• •React updates only when the snapped value changes, not per frame. Use onSlidingComplete for expensive work.

Accessibility

• •Each thumb is an adjustable element (a slider on the web) with min, max, now and the formatted text as its value.
• •Screen readers use the increment and decrement actions; one action moves one step (or 5 % of the range when continuous).
• •Range thumbs are labelled '<label>, Minimum' and '<label>, Maximum' (thumbLabels to localize).
• •On the web each thumb is focusable; arrow keys step it and show the value bubble while focused.
• •The touch area is 44 pt tall regardless of the visual size.

Notes for AI

Related