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.

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

Slider

Contains every component for the slider.

Props

  • size

    SizeTokens

    Control size of every component.

  • name

    string

    For usage with forms.

  • value

    number[]

    Controlled value.

  • defaultValue

    number[]

    Uncontrolled starting value.

  • onValueChange

    alue: number[]): void

  • disabled

    boolean

    Disable 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.