Slider

Drag to set values, vertically or horizontally

Slider lets users set one or more values with pointer, touch, or keyboard input in horizontal and vertical layouts.

Features

Sizing and theming with controlled or uncontrolled state
Multiple thumb support
Configurable steps and keyboard controls
Accessible, composable, and customizable

Installation

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

yarnnpmbunpnpm
yarn add @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.

import { Slider } from 'tamagui'

export default () => (
  <Slider size="md" 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:

import { Slider, styled } from 'tamagui'

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

export default () => (
  <Slider size="md" 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.

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}>
      {/* Your app content */}
    </TamaguiProvider>
  )
}

Then you can use vertical sliders normally:

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="sm" index={0} circular />
    </Slider>
  </XStack>
)

This is only required on iOS. On Android and web, the slider works correctly without passing insets.

API reference

Slider

Contains every component for the slider.

Props

size

'xs' | 'sm' | 'md' | 'lg' | 'xl'

Controls the size of every component.

name

string

For usage with forms. On web, renders one hidden input per thumb under this name, so multi-thumb values submit as repeated entries readable via FormData.getAll(name).

value

number[]

Controlled value.

defaultValue

number[]

Uncontrolled starting value.

onValueChange

(value: number[]): void

Callback called when the value changes.

disabled

boolean

Disables interaction.

orientation

"horizontal" | "vertical"

Default:

horizontal

Direction of the slider.

dir

"ltr" | "rtl"

Controls the side the active track appears on.

min

number

Minimum value.

max

number

Maximum value.

step

number

Minimum thumb move distance.

minStepsBetweenThumbs

number

Minimum steps between thumbs.

onSlideStart

(event: GestureReponderEvent, value: number, target: 'thumb' | 'track') => void

Called on slide start.

onSlideMove

(event: GestureReponderEvent, value: number) => void

Called on slide move.

onSlideEnd

(event: GestureReponderEvent, value: number) => void

Called on slide end.

Props

index (required)

number

Corresponds to the index of `value` or `defaultValue`. Use to correlate thumbs to each value in the array.

Select

Switch

Edit this page on GitHub.