SliderNew

Import

import { Slider } from 'heroui-native';

Anatomy

<Slider>
  <Slider.Output />
  <Slider.Track>
    <Slider.Fill />
    <Slider.Thumb />
  </Slider.Track>
</Slider>

• Slider: Main container that manages slider value state, orientation, and provides context to all sub-components. Supports single value and range modes.
• Slider.Output: Optional display of the current value(s). Supports render functions for custom formatting. Shows a formatted value label by default.
• Slider.Track: Sizing container for Fill and Thumb elements. Reports its layout size for position calculations. Supports tap-to-position and render-function children for dynamic content (e.g. multiple thumbs for range sliders).
• Slider.Fill: Responsive fill bar that stretches the full cross-axis of the Track. Only the main-axis position and size are computed.
• Slider.Thumb: Draggable thumb element using react-native-gesture-handler. Centered on the cross-axis by the Track layout. Animates scale on press via react-native-reanimated. Each thumb gets role="slider" with full accessibilityValue.

Usage

Basic Usage

The Slider component uses compound parts to create a draggable value input.

<Slider defaultValue={30}>
  <Slider.Output />
  <Slider.Track>
    <Slider.Fill />
    <Slider.Thumb />
  </Slider.Track>
</Slider>

With Label and Output

Display a label alongside the current value output.

<Slider defaultValue={50}>
  <View className="flex-row items-center justify-between">
    <Label>Volume</Label>
    <Slider.Output />
  </View>
  <Slider.Track>
    <Slider.Fill />
    <Slider.Thumb />
  </Slider.Track>
</Slider>

Vertical Orientation

Render the slider vertically by setting orientation to "vertical".

<View className="h-48">
  <Slider defaultValue={50} orientation="vertical">
    <Slider.Track>
      <Slider.Fill />
      <Slider.Thumb />
    </Slider.Track>
  </Slider>
</View>

Range Slider

Pass an array as the value and use a render function on Slider.Track to create multiple thumbs.

<Slider
  defaultValue={[200, 800]}
  minValue={0}
  maxValue={1000}
  step={10}
  formatOptions={{ style: 'currency', currency: 'USD' }}
>
  <View className="flex-row items-center justify-between">
    <Label>Price range</Label>
    <Slider.Output />
  </View>
  <Slider.Track>
    {({ state }) => (
      <>
        <Slider.Fill />
        {state.values.map((_, i) => (
          <Slider.Thumb key={i} index={i} />
        ))}
      </>
    )}
  </Slider.Track>
</Slider>

Controlled Value

Use value and onChange for controlled mode. The onChangeEnd callback fires when a drag or tap interaction completes.

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

<Slider value={volume} onChange={setVolume} onChangeEnd={(v) => save(v)}>
  <Slider.Output />
  <Slider.Track>
    <Slider.Fill />
    <Slider.Thumb />
  </Slider.Track>
</Slider>;

Custom Styling

Apply custom styles using className, classNames, or styles on the thumb and other sub-components.

<Slider defaultValue={65}>
  <Slider.Track className="h-3 rounded-full bg-success/10">
    <Slider.Fill className="rounded-full bg-success" />
    <Slider.Thumb
      classNames={{
        thumbContainer: 'size-6 rounded-full bg-success',
        thumbKnob: 'bg-success-foreground rounded-full',
      }}
      animation={{
        scale: { value: [1, 0.7] },
      }}
    />
  </Slider.Track>
</Slider>

Disabled

Disable the entire slider to prevent interaction.

<Slider defaultValue={40} isDisabled>
  <Slider.Track>
    <Slider.Fill />
    <Slider.Thumb />
  </Slider.Track>
</Slider>

Example

import { Label, Slider } from 'heroui-native';
import { useState } from 'react';
import { View, Text } from 'react-native';

export default function SliderExample() {
  const [price, setPrice] = useState<number[]>([200, 800]);

  return (
    <View className="px-8 gap-8">
      <Slider defaultValue={30}>
        <View className="flex-row items-center justify-between">
          <Label>Volume</Label>
          <Slider.Output />
        </View>
        <Slider.Track>
          <Slider.Fill />
          <Slider.Thumb />
        </Slider.Track>
      </Slider>

      <Slider
        value={price}
        onChange={setPrice}
        minValue={0}
        maxValue={1000}
        step={10}
        formatOptions={{ style: 'currency', currency: 'USD' }}
      >
        <View className="flex-row items-center justify-between">
          <Label>Price range</Label>
          <Slider.Output />
        </View>
        <Slider.Track>
          {({ state }) => (
            <>
              <Slider.Fill />
              {state.values.map((_, i) => (
                <Slider.Thumb key={i} index={i} />
              ))}
            </>
          )}
        </Slider.Track>
      </Slider>
    </View>
  );
}

You can find more examples in the GitHub repository.

API Reference

Slider

AnimationRootDisableAll

Animation configuration for the slider root component. Can be:

• "disable-all": Disable all animations including children
• undefined: Use default animations

Slider.Output

SliderRenderProps

SliderState

Slider.Track

Slider.Fill

Slider.Thumb

ElementSlots<ThumbSlots>

styles

SliderThumbAnimation

Animation configuration for the thumb knob scale effect. Can be:

• false or "disabled": Disable thumb animation
• undefined: Use default animations
• object: Custom scale animation configuration

Hooks

useSlider

Hook to access the slider context. Must be used within a Slider component.

import { useSlider } from 'heroui-native';

const { values, orientation, isDisabled, getThumbValueLabel } = useSlider();

Returns