Slider

Drag to set values, vertically or horizontally

import type { SliderProps } from 'tamagui'
import { Slider, XStack } from 'tamagui'

export function SliderDemo() {
  return (
    <XStack height={200} alignItems="center" gap="$8">
      <SimpleSlider height={200} orientation="vertical" />
      <SimpleSlider width={200} />
    </XStack>
  )
}

function SimpleSlider({ children, ...props }: SliderProps) {
  return (
    <Slider defaultValue={[50]} max={100} step={1} {...props}>
      <Slider.Track>
        <Slider.TrackActive />
      </Slider.Track>
      <Slider.Thumb size="$2" index={0} circular />
      {children}
    </Slider>
  )
}

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>
)

API Reference

Contains every component for the slider.

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

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

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