Slider

Range slider component for numeric value selection.

Slider

Slider is a form component for selecting numeric values within a range.

Import

import { Slider } from 'radix-native-ui';

Usage

import { Slider } from 'radix-native-ui';

<Slider
  value={[volume]}
  onValueChange={([v]) => setVolume(v)}
  min={0}
  max={100}
  step={1}
/>

Props

Haptic Feedback

Sliders provide haptic feedback by default when dragging starts, ends, and when tapping on the track. You can disable this with the hapticFeedback prop:

<Slider
  value={[value]}
  onValueChange={([v]) => setValue(v)}
  hapticFeedback={false}
/>

Examples

Basic Slider

<Slider
  value={[value]}
  onValueChange={([v]) => setValue(v)}
/>

With Range

<Slider
  value={[min, max]}
  onValueChange={([min, max]) => setRange(min, max)}
  min={0}
  max={1000}
  step={10}
/>

Volume Control

<Flex direction="column" gap={2}>
  <Flex justify="between">
    <Text>Volume</Text>
    <Text>{volume}%</Text>
  </Flex>
  <Slider
    value={[volume]}
    onValueChange={([v]) => setVolume(v)}
    color="blue"
  />
</Flex>

Price Range Filter

<Card>
  <Flex direction="column" gap={3}>
    <Heading size={3}>Price Range</Heading>
    <Flex justify="between">
      <Text>${priceRange[0]}</Text>
      <Text>${priceRange[1]}</Text>
    </Flex>
    <Slider
      value={priceRange}
      onValueChange={setPriceRange}
      min={0}
      max={1000}
      step={50}
      minStepsBetweenThumbs={1}
    />
  </Flex>
</Card>

Sizes

<Flex direction="column" gap={3}>
  <Slider size="1" defaultValue={50} />
  <Slider size="2" defaultValue={50} />
  <Slider size="3" defaultValue={50} />
  <Slider size="4" defaultValue={50} />
</Flex>

Variants

<Flex direction="column" gap={3}>
  <Slider variant="solid" defaultValue={50} />
  <Slider variant="soft" defaultValue={50} />
  <Slider variant="surface" defaultValue={50} />
  <Slider variant="outline" defaultValue={50} />
</Flex>

With Color

<Slider
  color="green"
  value={[value]}
  onValueChange={([v]) => setValue(v)}
/>

Disabled

<Slider disabled defaultValue={[50]} />

Related

• TextField - Text input
• Progress - Progress bar