> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/slider.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Slider

Choose a number or range by sliding.

## Basic usage


Volume

LowMidHigh

Current value: 35

Budget

LowMidHigh

Disabled value

Vertical value

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/slider/basic.tsx"
import type { SliderMark } from '@ifhover/leaf-ui';

import { Form, FormField, Slider, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

const marks: SliderMark[] = [
  { value: 0, label: 'Low' },
  { value: 50, label: 'Mid' },
  { value: 100, label: 'High' },
];

export function SliderBasic() {
  const [value, setValue] = useState(35);
  return (
    <Form layout="vertical">
      <FormField label="Volume">
        <Slider aria-label="Volume" value={value} onChange={setValue} marks={marks} />
      </FormField>
      <Text tone="muted">Current value: {value}</Text>
      <FormField label="Budget">
        <Slider aria-label="Budget" range defaultValue={[20, 70]} marks={marks} />
      </FormField>
      <FormField label="Disabled value">
        <Slider aria-label="Disabled value" defaultValue={45} disabled />
      </FormField>
      <FormField label="Vertical value">
        <Slider aria-label="Vertical value" vertical defaultValue={60} />
      </FormField>
    </Form>
  );
}
```

Expand code

## Discrete marks and tooltip


Discrete marks with formatted tooltip

02560100

capabilities.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/slider/capabilities.tsx"
import { Flex, Slider, Space, Text } from '@ifhover/leaf-ui';

export function Capabilities() {
  return (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm" align="center">
        <Text>
          {'Discrete marks with formatted tooltip'}
        </Text>
        <Slider
          defaultValue={25}
          step={null}
          marks={[
            { value: 0, label: '0' },
            { value: 25, label: '25' },
            { value: 60, label: '60' },
            { value: 100, label: '100' },
          ]}
          tooltip={{ formatter: (value) => `${value}%` }}
        />
      </Flex>
    </Space>
  );
}
```

Expand code

## Slider API

| Property           | Type                                                               | Default      | Description                                                        |
| ------------------ | ------------------------------------------------------------------ | ------------ | ------------------------------------------------------------------ |
| `min`              | `number`                                                           | `0`          | Bounds and step                                                    |
| `max`              | `number`                                                           | `100`        | Bounds and step                                                    |
| `step`             | `number \| null`                                                   | `1`          | Bounds and step                                                    |
| `marks`            | `readonly `[`SliderMark`](#slidermark)`[]`                         | `[]`         | Marks                                                              |
| `vertical`         | `boolean`                                                          | `false`      | Use a vertical layout                                              |
| `showValue`        | `boolean`                                                          | `false`      | Show the value above the rail on hover or focus; hidden by default |
| `onChangeComplete` | `(value: number \| readonly [number, number]) => void`             | —            | After a drag or keyboard change completes                          |
| `tooltip`          | `boolean \| { formatter?: (value: number) => ReactNode }`          | `false`      | Show a thumb tooltip, optionally with custom formatting.           |
| `range`            | `false \| true`                                                    | `false`      | Range selection                                                    |
| `value`            | `number \| readonly [number, number]`                              | Required     | Mark position                                                      |
| `defaultValue`     | `number \| readonly [number, number]`                              | `[min, max]` | Controlled / initial value; tuple for ranges                       |
| `onChange`         | `((value: number) => void) \| ((value: [number, number]) => void)` | —            | Value changes; callback follows range mode                         |
| `disabled`         | `boolean`                                                          | `false`      | Disable interaction.                                               |
| `readOnly`         | `boolean`                                                          | `false`      | Lock the value against typing, selection, clearing and removal.    |
| `name`             | `string`                                                           | —            | Field name in native FormData.                                     |
| `form`             | `string`                                                           | —            | ID of the associated native form.                                  |

### SliderMark

| Property | Type        | Default  | Description   |
| -------- | ----------- | -------- | ------------- |
| `value`  | `number`    | Required | Mark position |
| `label`  | `ReactNode` | —        | Mark label    |

## Types

Import the exported types when defining props or building item lists.

```ts
import type { SliderProps, SliderMark } from '@ifhover/leaf-ui';
```

## Usage notes

Arrows change the value, Home / End go to bounds, and Shift + arrows or PageUp / PageDown move ten steps. Range thumbs do not cross. Range mode submits two values under the same name; read them with FormData.getAll. Native form reset is supported.

## SliderMark

| Property | Type        | Default | Description                 |
| -------- | ----------- | ------- | --------------------------- |
| `value`  | `number`    | —       | Required. Controlled value. |
| `label`  | `ReactNode` | —       | Visible label or content.   |