gui/apps/gui.hanzo.ai/data/docs/components/slider/1.45.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>
)
```

## 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](/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.`,
    },
  ]}
/>