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>
  );
}

离散刻度与提示

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

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[]`	`[]`	刻度列表
`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`	—	刻度文字

类型

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

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

使用说明

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

SliderMark

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

#Slider 滑动输入条

#基础用法

#离散刻度与提示

#Slider API

#SliderMark

#类型

#使用说明

#SliderMark

Slider 滑动输入条

基础用法

离散刻度与提示

Slider API

SliderMark

类型

使用说明

SliderMark