Slider

Drag to set values, vertically or horizontally

Features

Sizable, themed, works controlled or uncontrolled.

Multiple thumbs support.

Control steps and control with your keyboard.

Accessible, easy to compose and customize.

Installation

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

yarn
npm
bun
pnpm
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="$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:

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.

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="$2" 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

SizeTokens

Controls the size of every component.

name

string

For usage with forms.

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.