Slider 滑块

价格区间

import { Slider } from "@lark-ui/core";

export function SliderRangeDemo() {
  return (
    <Slider
      label="价格区间"
      defaultValue={[25, 75]}
      getAriaLabel={(index) => (index === 0 ? "最低价格" : "最高价格")}
      className="w-72"
    />
  );
}

安装

统一导出

import { Slider } from "@lark-ui/core";

按需导出

import { Slider } from "@lark-ui/core/components/slider";

用法

import { Slider } from "@lark-ui/core";

export default function Example() {
  return <Slider label="Volume" defaultValue={40} />;
}

滑块（Slider）基于 Base UI 的 Slider 构建。value、defaultValue、min、max、step、format 和 onValueChange 等属性会直接透传给它。

示例

基础滑块

单个滑块手柄，数值以徽标形式显示在其下方，最小值和最大值分别位于轨道两端。

音量

import { Slider } from "@lark-ui/core";

export function SliderBasicDemo() {
  return <Slider label="音量" defaultValue={40} className="w-72" />;
}

区间

向 value 或 defaultValue 传入数组，即可为每个数值渲染一个滑块手柄。使用 getAriaLabel 可以为每个手柄设置各自的无障碍名称。

价格区间

import { Slider } from "@lark-ui/core";

export function SliderRangeDemo() {
  return (
    <Slider
      label="价格区间"
      defaultValue={[25, 75]}
      getAriaLabel={(index) => (index === 0 ? "最低价格" : "最高价格")}
      className="w-72"
    />
  );
}

自定义范围与步长

设置 min、max 和 step 可以约束可选取的数值。

匹配数量

import { Slider } from "@lark-ui/core";

export function SliderStepDemo() {
  return <Slider label="匹配数量" defaultValue={2} max={5} className="w-72" />;
}

格式化数值

format 接受 Intl.NumberFormat 选项，并应用于徽标、范围标签以及向辅助技术播报的数值。

采样率

import { Slider } from "@lark-ui/core";

export function SliderFormatDemo() {
  return (
    <Slider
      label="采样率"
      defaultValue={0.25}
      min={0}
      max={1}
      step={0.05}
      format={{ style: "percent" }}
      className="w-72"
    />
  );
}

尺寸

在紧凑布局中使用 size="sm"。

小

常规

import { Slider } from "@lark-ui/core";

export function SliderSizesDemo() {
  return (
    <div className="flex w-72 flex-col gap-6">
      <Slider label="小" size="sm" defaultValue={30} />
      <Slider label="常规" defaultValue={30} />
    </div>
  );
}

受控

传入 value 和 onValueChange 即可控制滑块。

亮度

亮度：50%

import { useState } from "react";
import { Slider } from "@lark-ui/core";

export function SliderControlledDemo() {
  const [value, setValue] = useState(50);

  return (
    <div className="flex w-72 flex-col gap-3">
      <Slider
        label="亮度"
        value={value}
        onValueChange={(next) => setValue(next)}
      />
      <p className="text-sm text-lark-subtle">亮度：{value}%</p>
    </div>
  );
}

禁用

已锁定

import { Slider } from "@lark-ui/core";

export function SliderDisabledDemo() {
  return <Slider label="已锁定" defaultValue={70} disabled className="w-72" />;
}

无障碍

每个滑块手柄都是原生范围输入框，因此方向键、Page Up/Page Down 和 Home/End 默认即可使用。
label 为滑块及其手柄命名。如果没有可见标签，请传入 getAriaLabel。
数值徽标和范围标签对辅助技术隐藏，因为每个手柄已经会播报其格式化后的数值。

API 参考

属性	类型	默认值	说明
size	`"sm" \| "base"`	`"base"`	-
label	`ReactNode`	-	显示在滑块轨道上方的标签。
getAriaLabel	`(index: number) => string`	-	每个滑块手柄的无障碍名称。没有可见的 `label` 时使用它，或用于区分范围滑块中的各个手柄。
value	`number \| readonly number[]`	-	受控值。传入数组可为每个值渲染一个手柄（范围）。
defaultValue	`number \| readonly number[]`	-	非受控的初始值。传入数组可为每个值渲染一个手柄（范围）。
onValueChange	`(value: number \| readonly number[], eventDetails: SliderRoot.ChangeEventDetails) => void`	-	拖动或通过键盘操作导致值变化时调用
min	`number`	-	滑块的最小值（默认 0）
max	`number`	-	滑块的最大值（默认 100）
step	`number`	-	每一步的值变化量（默认 1）
format	`Intl.NumberFormatOptions`	-	格式化数值徽标、范围标签以及朗读给辅助技术的数值
disabled	`boolean`	-	滑块是否禁用

Lark