Slider

tsx

Installation

Slider is already installed in tamagui, or you can install it independently:

bash

npm install @tamagui/slider

Usage

Slider comes as multiple components that ship with default styles and are sizable. The size prop on <Slider /> will automatically pass size down to all the sub-components.

tsx

import { Slider } from 'tamagui'

export default () => (
  <Slider size="$4" width={200} defaultValue={[50]} max={100} step={1}>
    <Slider.Track>
      <Slider.TrackActive />
    </Slider.Track>
    <Slider.Thumb circular index={0} />
  </Slider>
)

You can also optionally style any component, either using inline style props or by wrapping with styled:

tsx

import { Slider, styled } from 'tamagui'

const CustomSliderTrack = styled(Slider.Track, {
  backgroundColor: 'red',
})

export default () => (
  <Slider size="$4" width={200} defaultValue={[50]} max={100} step={1}>
    <CustomSliderTrack>
      <Slider.TrackActive />
    </CustomSliderTrack>
    <Slider.Thumb circular index={0} />
  </Slider>
)

Vertical Slider on iOS

When using a vertical slider on iOS, you need to pass safe area insets to TamaguiProvider for proper pointer position calculation. Without this, the slider thumb may not track your finger correctly due to iOS safe area offsets.

tsx

import { TamaguiProvider } from 'tamagui'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { config } from './tamagui.config'

function App() {
  const insets = useSafeAreaInsets()

  return (
    <TamaguiProvider config={config} insets={insets}>
    </TamaguiProvider>
  )
}

Then you can use vertical sliders normally:

tsx

import { Slider, XStack } from 'tamagui'

export default () => (
  <XStack height={200} alignItems="center" gap="$8">
    <Slider height={200} orientation="vertical" defaultValue={[50]} max={100} step={1}>
      <Slider.Track>
        <Slider.TrackActive />
      </Slider.Track>
      <Slider.Thumb size="$2" index={0} circular />
    </Slider>
  </XStack>
)

<Notice theme="blue"> This is only required on iOS. On Android and web, the slider works correctly without passing insets. </Notice>

API Reference

Contains every component for the slider.

<PropsTable data={[ { name: 'size', required: false, type: 'SizeTokens', description: Controls the size of every component., }, { name: 'name', required: false, type: 'string', description: For usage with forms., }, { name: 'value', required: false, type: 'number[]', description: Controlled value., }, { name: 'defaultValue', required: false, type: 'number[]', description: Uncontrolled starting value., }, { name: 'onValueChange', required: false, type: '(value: number[]): void', description: Callback called when the value changes., }, { name: 'disabled', required: false, type: 'boolean', description: Disables interaction., }, { name: 'orientation', required: false, type: "horizontal" | "vertical", default: 'horizontal', description: Direction of the slider., }, { name: 'dir', required: false, type: '"ltr" | "rtl"', description: Controls the side the active track appears on., }, { name: 'min', required: false, type: 'number', description: Minimum value., }, { name: 'max', required: false, type: 'number', description: Maximum value., }, { name: 'step', required: false, type: 'number', description: Minimum thumb move distance., }, { name: 'minStepsBetweenThumbs', required: false, type: 'number', description: Minimum steps between thumbs., }, { name: 'onSlideStart', required: false, type: (event: GestureReponderEvent, value: number, target: 'thumb' | 'track') => void, description: Called on slide start., }, { name: 'onSlideMove', required: false, type: (event: GestureReponderEvent, value: number) => void, description: Called on slide move., }, { name: 'onSlideEnd', required: false, type: (event: GestureReponderEvent, value: number) => void, description: Called on slide end., }, ]} />

Slider.Track

Slider.Track inherits SizableStack, extending all the default props.

Slider.TrackActive

Slider.TrackActive inherits Stack, extending all the default props.

Slider.Thumb

Slider.Thumb inherits SizableStack, extending all the default props, adding: