gui/apps/gui.hanzo.ai/data/docs/components/slider/2.0.0.mdx

---
title: Slider
description: Drag to set values, vertically or horizontally
name: slider
component: Slider
package: slider
demoName: Slider
---

<HeroContainer>
  <SliderDemo />
</HeroContainer>

```tsx hero template=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 `hanzogui`, or you can install it independently:

```bash
npm install @hanzogui/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.

```tsx
import { Slider } from '@hanzo/gui'

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

```tsx
import { Slider, styled } from '@hanzo/gui'

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

## Vertical Slider on iOS

When using a vertical slider on iOS, you need to pass safe area insets to `GuiProvider` for proper pointer position calculation. Without this, the slider thumb may not track your finger correctly due to iOS safe area offsets.

```tsx
import { GuiProvider } from '@hanzo/gui'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { config } from './hanzogui.config'

function App() {
  const insets = useSafeAreaInsets()

  return (
    <GuiProvider config={config} insets={insets}>
      {/* Your app content */}
    </GuiProvider>
  )
}
```

Then you can use vertical sliders normally:

```tsx
import { Slider, XStack } from '@hanzo/gui'

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="$2" index={0} circular />
    </Slider>
  </XStack>
)
```

<Notice theme="blue">
  This is only required on iOS. On Android and web, the slider works correctly without
  passing insets.
</Notice>

## API Reference

### Slider

Contains every component for the slider.

<PropsTable
  data={[
    {
      name: 'size',
      required: false,
      type: 'SizeTokens',
      description: `Controls the 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: `Callback called when the value changes.`,
    },
    {
      name: 'disabled',
      required: false,
      type: 'boolean',
      description: `Disables 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](/docs/intro/props).

### Slider.TrackActive

Slider.TrackActive inherits `Stack`, extending all the default [props](/docs/intro/props).

### Slider.Thumb

Slider.Thumb inherits `SizableStack`, extending all the default [props](/docs/intro/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.`,
    },
  ]}
/>