Slider

<Highlights 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:

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.

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

Slider

Contains every component for the slider.

<PropsTable data={[ { name: 'size', required: false, type: 'SizeTokens', description: Control 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: ``, }, { name: 'disabled', required: false, type: 'boolean', description: Disable 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:

<PropsTable data={[ { name: 'index', required: true, type: 'number', description: Corresponds to the index of \value` or `defaultValue`. Use to correlate thumbs to each value in the array.`, }, ]} />