Slider

Forms

A range slider with a draggable thumb. Supports min, max, step, and controlled value with a smooth Reanimated gesture.

Installation

bash

npx native-mate add slider

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Slider } from '~/components/ui/slider'
import { useState } from 'react'

const [volume, setVolume] = useState(50)

<Slider
  value={volume}
  onValueChange={setVolume}
  min={0}
  max={100}
  step={5}
/>

Props

Prop	Type	Default	Description
value	number	—	Controlled current value.
onValueChange	(value: number) => void	—	Called continuously as the thumb is dragged.
min	number	0	Minimum value of the range.
max	number	100	Maximum value of the range.
step	number	1	Snap increment between selectable values.
disabled	boolean	false	Prevents dragging and reduces opacity.

Example

tsx

import { useState } from 'react'
import { Slider } from '~/components/ui/slider'
import { Text } from '@native-mate/core'
import { View } from 'react-native'

export function SliderExample() {
  const [brightness, setBrightness] = useState(70)
  const [fontSize, setFontSize] = useState(16)

  return (
    <View style={{ gap: 24, padding: 16 }}>
      <View style={{ gap: 8 }}>
        <Text weight="medium">Brightness: {brightness}%</Text>
        <Slider value={brightness} onValueChange={setBrightness} min={0} max={100} />
      </View>
      <View style={{ gap: 8 }}>
        <Text weight="medium">Font size: {fontSize}px</Text>
        <Slider value={fontSize} onValueChange={setFontSize} min={12} max={24} step={2} />
      </View>
    </View>
  )
}

Switch

Select