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

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

# Slider 滑动输入条

通过滑动选择数值或区间。

## 基础用法


音量

低中高

当前数值：35

预算

低中高

禁用数值

垂直数值

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/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: '低' },
  { value: 50, label: '中' },
  { value: 100, label: '高' },
];

export function SliderBasic() {
  const [value, setValue] = useState(35);
  return (
    <Form layout="vertical">
      <FormField label="音量">
        <Slider aria-label="音量" value={value} onChange={setValue} marks={marks} />
      </FormField>
      <Text tone="muted">当前数值：{value}</Text>
      <FormField label="预算">
        <Slider aria-label="预算" range defaultValue={[20, 70]} marks={marks} />
      </FormField>
      <FormField label="禁用数值">
        <Slider aria-label="禁用数值" defaultValue={45} disabled />
      </FormField>
      <FormField label="垂直数值">
        <Slider aria-label="垂直数值" vertical defaultValue={60} />
      </FormField>
    </Form>
  );
}
```

展开代码

## 离散刻度与提示


只选择指定刻度与自定义提示

02560100

capabilities.tsx

复制代码

```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>
          {'只选择指定刻度与自定义提示'}
        </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>
  );
}
```

展开代码

## Slider API

| 属性                 | 类型                                                                 | 默认值          | 说明                   |
| ------------------ | ------------------------------------------------------------------ | ------------ | -------------------- |
| `min`              | `number`                                                           | `0`          | 范围与步长                |
| `max`              | `number`                                                           | `100`        | 范围与步长                |
| `step`             | `number \| null`                                                   | `1`          | 范围与步长                |
| `marks`            | `readonly `[`SliderMark`](#slidermark)`[]`                         | `[]`         | 刻度列表                 |
| `vertical`         | `boolean`                                                          | `false`      | 使用垂直布局               |
| `showValue`        | `boolean`                                                          | `false`      | 悬停或聚焦时在右上方显示数值，默认隐藏  |
| `onChangeComplete` | `(value: number \| readonly [number, number]) => void`             | —            | 拖动或键盘操作完成后触发         |
| `tooltip`          | `boolean \| { formatter?: (value: number) => ReactNode }`          | `false`      | 显示滑块提示，可定制数值格式。      |
| `range`            | `false \| true`                                                    | `false`      | 区间选择                 |
| `value`            | `number \| readonly [number, number]`                              | 必填           | 刻度位置                 |
| `defaultValue`     | `number \| readonly [number, number]`                              | `[min, max]` | 受控 / 初始数值，区间为二元数组    |
| `onChange`         | `((value: number) => void) \| ((value: [number, number]) => void)` | —            | 数值变化，回调类型由 range 决定  |
| `disabled`         | `boolean`                                                          | `false`      | 禁用交互。                |
| `readOnly`         | `boolean`                                                          | `false`      | 锁定业务值，禁止输入、选择、清除和删除。 |
| `name`             | `string`                                                           | —            | 原生 FormData 中的字段名。   |
| `form`             | `string`                                                           | —            | 关联的原生表单 ID。          |

### SliderMark

| 属性      | 类型          | 默认值 | 说明   |
| ------- | ----------- | --- | ---- |
| `value` | `number`    | 必填  | 刻度位置 |
| `label` | `ReactNode` | —   | 刻度文字 |

## 类型

定义组件属性或组装列表时可导入相关类型。

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

## 使用说明

方向键调整数值，Home / End 跳至边界，Shift + 方向键和 PageUp / PageDown 调整十个步长。区间的两个端点不会互相穿越。表单中 range 使用同一个 name 提交两个值，可用 FormData.getAll 读取，并支持表单 reset。

## SliderMark

| 属性      | 类型          | 默认值 | 说明       |
| ------- | ----------- | --- | -------- |
| `value` | `number`    | —   | 必需。受控值。  |
| `label` | `ReactNode` | —   | 展示文字或内容。 |