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.

// copy-paste: these skins import from files you own. copy each registry item
// below into your app, then adjust the relative import paths to fit.
//   components/tamagui/Slider.tsx (registry item "slider")
// npm dependencies: @tamagui/core @tamagui/slider
import { Slider } from "../components/tamagui/Slider";
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:

// copy-paste: these skins import from files you own. copy each registry item
// below into your app, then adjust the relative import paths to fit.
//   components/tamagui/Slider.tsx (registry item "slider")
// npm dependencies: @tamagui/core @tamagui/slider
import { styled } from 'tamagui';
import { Slider } from "../components/tamagui/Slider";
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:

// copy-paste: these skins import from files you own. copy each registry item
// below into your app, then adjust the relative import paths to fit.
//   components/tamagui/Slider.tsx (registry item "slider")
// npm dependencies: @tamagui/core @tamagui/slider
import { XStack } from 'tamagui';
import { Slider } from "../components/tamagui/Slider";
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.

Slider.Track

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

Slider.TrackActive

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

Slider.Thumb

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

Props

index (required)

number

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

Source

v2-look Slider: track color + radius, active-range fill color + radius, and thumb border/background/hover/press/focus color styling, over the unstyled @tamagui/ui Slider behavior (which keeps fill/clip/positioning + the thumb size mechanism). This is the exact source the registry ships — copy it into your app and the examples above import from your copy.

components/tamagui/Slider.tsx

// Styled Slider = the unstyled @tamagui/ui Slider behavior + the default v2-look
// skin (track color, fill color, thumb border/background) and the size table.
// The behavior frames keep fill/clip/positioning and the thumb math. Single skin
// definition; the shadcn registry item is generated from this file.
import {
  type ComponentSize,
  createRefComponent,
  createStyledContext,
  styled,
  type TamaguiElement,
  withStaticProperties,
} from '@tamagui/core'
import { Slider as UiSlider } from '@tamagui/slider'
import type * as React from 'react'

export type SliderSize = ComponentSize | boolean

// the track is composed below the root, so it never sees the root's orientation
// prop: the root republishes size + orientation here for the track resolver
const SliderSizeContext = createStyledContext<{
  size?: SliderSize
  orientation?: 'horizontal' | 'vertical'
}>({ size: 'md', orientation: 'horizontal' })

const resolveSliderSize = (size: unknown): keyof typeof sliderThumbSize =>
  typeof size === 'string' && size in sliderThumbSize
    ? (size as keyof typeof sliderThumbSize)
    : 'md'

// the thumb is a line-height tall circle
const sliderThumbSize = {
  xs: { width: 16, height: 16, minWidth: 16, minHeight: 16 },
  sm: { width: 20, height: 20, minWidth: 20, minHeight: 20 },
  md: { width: 20, height: 20, minWidth: 20, minHeight: 20 },
  lg: { width: 24, height: 24, minWidth: 24, minHeight: 24 },
  xl: { width: 28, height: 28, minWidth: 28, minHeight: 28 },
} as const

// the track is a thin bar: the control height over six, rounded
const sliderTrackSize = {
  xs: 4,
  sm: 5,
  md: 6,
  lg: 7,
  xl: 8,
} as const

export const SliderTrackFrame = styled(UiSlider.Track, {
  displayName: 'SliderTrack',
  context: SliderSizeContext,
  backgroundColor: 'background-press',
  borderRadius: 100_000,
}).resolve((props) => {
  const size = props.size as SliderSize | undefined
  if (size == null || size === false) return
  const thickness = sliderTrackSize[resolveSliderSize(size)]
  if (props.orientation === 'vertical') {
    return {
      width: thickness,
      borderRadius: thickness,
    }
  }
  return {
    height: thickness,
    borderRadius: thickness,
  }
})

export const SliderTrack = SliderTrackFrame

export const SliderActiveFrame = styled(UiSlider.TrackActive, {
  displayName: 'SliderTrackActive',
  backgroundColor: 'color',
  borderRadius: 100_000,
})

export const SliderActive = SliderActiveFrame

export const SliderThumbFrame = styled(UiSlider.Thumb, {
  displayName: 'SliderThumb',
  context: SliderSizeContext,
  borderWidth: 2,
  borderColor: 'border-color hover:border-color-hover press:border-color-press',
  backgroundColor: 'background hover:background-hover press:background-press',
  outlineStyle: 'focus-visible:solid',
  outlineWidth: 'focus-visible:2px',
  outlineColor: 'focus-visible:outline-color',
  variants: {
    size: {
      ...sliderThumbSize,
      true: sliderThumbSize.md,
    },
  } as const,
  defaultVariants: {
    size: 'md',
  },
})

export const SliderThumb = SliderThumbFrame

// see Dialog.tsx: withStaticProperties assigns in place, so composing onto UiSlider
// would rewrite @tamagui/ui's own Slider.Track/.TrackActive/.Thumb for every consumer
// of the unstyled package.
const SliderRoot = createRefComponent<
  TamaguiElement,
  React.ComponentProps<typeof UiSlider>
>(function Slider(props, ref) {
  return (
    <SliderSizeContext.Provider
      size={resolveSliderSize(props.size)}
      orientation={props.orientation ?? 'horizontal'}
    >
      <UiSlider
        {...props}
        // the behavior thumb positions itself by px before its first layout
        size={sliderThumbSize[resolveSliderSize(props.size)].width}
        ref={ref}
      />
    </SliderSizeContext.Provider>
  )
})

export const Slider = withStaticProperties(SliderRoot, {
  Track: SliderTrack,
  TrackActive: SliderActive,
  Thumb: SliderThumb,
})

Dependencies

yarn add @tamagui/core @tamagui/slider

Expects theme tokens: background, background-hover, background-press, color, border-color, border-color-hover, border-color-press, outline-color.

Need raw behavior without any skin? tamagui/unstyled re-exports the @tamagui/ui primitives (advanced).

Select

Switch

Edit this page on GitHub.