#滑块

滑块用于在有明确边界的范围内调整近似值。适合用户能立即感知调整结果，并且相对位置比精确键入更重要的场景。

npm install @a3s-lab/ui

<div class="field">
  <div class="flex items-center justify-between gap-2">
    <label for="temperature">温度</label>
    <output for="temperature">20 °C</output>
  </div>
  <input
    class="input w-full"
    type="range"
    id="temperature"
    name="temperature"
    min="10"
    max="30"
    step="1"
    value="20"
    aria-valuetext="20 摄氏度"
  />
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#用法

导入 Tailwind 和完整的 A3S 样式包：

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

使用带可见标签的原生范围输入控件。引入 Range 运行时，使轨道填充始终与原生值同步。

<div class="field">
  <div class="flex items-center justify-between gap-2">
    <label for="temperature">温度</label>
    <output for="temperature">20 °C</output>
  </div>
  <input
    class="input w-full"
    type="range"
    id="temperature"
    name="temperature"
    min="10"
    max="30"
    step="1"
    value="20"
    aria-valuetext="20 摄氏度"
  />
</div>

如需按组件加载，请依次导入基础样式、Range 结构、A3S 视觉样式、运行时与 Range 控制器。CDN 等其他接入方式参见安装。

@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/range.css";
@import "@a3s-lab/ui/styles/a3s.css";

<script src="/assets/js/runtime.min.js" defer></script>
<script src="/assets/js/range.min.js" defer></script>

#参数

#产品决策

只有同时满足以下条件时才选择滑块：

• 范围具有明确且有意义的最小值和最大值。
• 用户能在调整过程中看到或感知结果。
• 可以接受近似选择，或步长小而且容易预测。
• 当前值与单位能够在控件旁清楚呈现。

如果用户必须输入精确值、对比多个精确值，或范围没有明确边界，应使用数字字段。当快速调整与精确输入都很重要时，将滑块和数字字段组合在一起，并让两者共享同一个值模型。

#状态与变体

#独立滑块

独立滑块仍然需要无障碍名称。它适合所在界面已经用其他方式展示当前值的场景，例如媒体播放器。

<SliderDemo id="slider-standalone" />

#标签与实时值

标签位于同一行的起始端，实时值位于结束端。当原始数字含义不明确时，在可见输出和 aria-valuetext 中都加入单位。

<SliderDemo id="slider-labeled" variant="labeled" />

#表单字段

滑块属于表单时，应说明调整后果或限制，并通过 aria-describedby 关联。原生值用于提交，格式化输出只负责呈现。

<SliderDemo id="slider-field" variant="field" />

#已禁用

禁用控件仍然显示当前值。把禁用原因放在字段旁边，不要让降低透明度成为唯一解释。

<div class="field" data-disabled>
    <SliderDemo id="slider-disabled" variant="labeled" disabled />
    <p>此限制由工作区策略统一管理。</p>
  </div>

#RTL

在输入控件或祖先元素上设置 dir="rtl"。填充轨道从逻辑起始端增长，原生方向键跟随文档方向；最小值和最大值的数值含义不会改变。

<SliderDemo id="slider-rtl" direction="rtl" />

#无障碍

• 尽量通过可见 label 为每个滑块提供无障碍名称。只有当周围界面已经清楚展示用途时才使用 aria-label。
• 声明真实的 min、max 与 step。不要依赖刻度标记或空间位置传达隐藏的数值范围。
• 在轨道旁显示当前值和单位。当原始数字需要单位、类别或其他可读含义时，加入本地化的 aria-valuetext。
• 保留原生键盘行为。方向键调整一个步长，支持时 Page Up 与 Page Down 进行更大调整，Home 与 End 到达声明的端点。
• 指针拖动不能加入缓动或延迟动画，滑块手柄与可见结果必须直接跟随输入。
• 在粗指针设备上让完整点击目标至少达到 44px，视觉轨道和手柄仍保持紧凑。
• 禁用滑块保留可读的值和相邻原因。不要只用降低透明度隐藏策略或权限限制。
• RTL 使用逻辑方向处理填充与布局。必须测试实际键盘行为，不能只镜像视觉图形。