wwwwwwwwwwwwwwwwwww

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:

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.

Props

  • size

    SizeTokens

    Control size of every component.

  • name

    string

    For usage with forms.

  • value

    number[]

    Controlled value.

  • defaultValue

    number[]

    Uncontrolled starting value.

  • onValueChange

    (value: 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.

  • 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 SizableStack, extending all the default props.

    Slider.TrackActive

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

    Slider.Thumb

    Slider.Track Inherits SizableStack, 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.

    • Previous

    Select

    Next

    Switch

    Edit this page on GitHub.