@ data- slot/ sliver 数据位/ 滑动器

香草JavaScript的无头滑动组件. 支持具有完全键盘导航和ARIA合规的单值和射程滑动.

安装

bun add @data-slot/slider
# or
npm install @data-slot/slider

使用量

HTML 结构

<!-- Single value slider -->
<div data-slot="slider" data-default-value="50">
  <div data-slot="slider-track">
    <div data-slot="slider-range"></div>
  </div>
  <div data-slot="slider-thumb"></div>
</div>

<!-- Optional control wrapper -->
<div data-slot="slider" data-default-value="50">
  <div data-slot="slider-control">
    <div data-slot="slider-track">
      <div data-slot="slider-range"></div>
    </div>
    <div data-slot="slider-thumb"></div>
  </div>
</div>

<!-- Range slider (two thumbs) -->
<div data-slot="slider" data-default-value="25,75">
  <div data-slot="slider-track">
    <div data-slot="slider-range"></div>
  </div>
  <div data-slot="slider-thumb"></div>
  <div data-slot="slider-thumb"></div>
</div>

Java 脚本

import { create, createSlider } from "@data-slot/slider";

// Auto-discover and bind all [data-slot="slider"] elements
const controllers = create();

// Or target a specific element
const slider = createSlider(element, {
  defaultValue: 50,
  min: 0,
  max: 100,
  step: 1,
  thumbAlignment: "edge",
  onValueChange: (value) => console.log("Changed:", value),
  onValueCommit: (value) => console.log("Committed:", value),
});

// Programmatic control
slider.setValue(75);
console.log(slider.value); // 75

// Cleanup
slider.destroy();

API 密码

初始化

create(scope?)

寻找和约束未初始化 [data-slot="slider"] 后裔 scope (违约) document) (中文(简体) ). 回返 SliderController[] 新绑起的根。 初始化范围元素本身,使用 createSlider。 。 。 .

import { create } from "@data-slot/slider";

const controllers = create();

createSlider(root, options?)

创建一个 SliderController 用于一个根元素。 JavaScript 选项优先于相应的数据属性. 再次调用此选项为绑定根返回其已存在的控制器; 在重新绑定新选项前将其销毁 .

import { createSlider } from "@data-slot/slider";

const controller = createSlider(element, {});

槽数

运行时间槽

• slider - 管理值、界限、方向和残疾状态的根元素.
• slider-control - 轨迹和拇指周围的可选交互包. 省略后,会使用音轨的母音,一般为根.
• slider-track - 用于测量指针位置和显示射程和拇指的必用道.
• slider-range - 音轨的可选填充部分;其位置和大小遵循选定的值或范围.
• slider-thumb - 需要有滑动语义和键盘支持的可拖动控制。 单个值或两个值用于范围;两个拇指启用范围模式.

数据属性

选项

JavaScript 选项优先于根数据属性.

主计长

活动

境外事件

听这些关于根元素的事件.

入境事件

将这些事件传到根元件上.

// Listen for changes
root.addEventListener("slider:change", (e) => {
  console.log("Value:", e.detail.value);
});

// Set value from outside
root.dispatchEvent(new CustomEvent("slider:set", {
  detail: { value: 50 }
}));

// Set range value
root.dispatchEvent(new CustomEvent("slider:set", {
  detail: { value: [25, 75] }
}));

说明: 禁用滑动器时被屏蔽 .

折旧形状

下列形状被去化并会在v1.0中去除:

// Deprecated: bare number
root.dispatchEvent(new CustomEvent("slider:set", {
  detail: 50
}));

// Deprecated: bare array
root.dispatchEvent(new CustomEvent("slider:set", {
  detail: [25, 75]
}));

使用 { value: ... } 换句话说.

样式

该组件为 CSS 勾通设置了数据属性和内置样式:

/* Root state */
[data-slot="slider"][data-orientation="horizontal"] { ... }
[data-slot="slider"][data-orientation="vertical"] { ... }
[data-slot="slider"][data-disabled] { ... }
[data-slot="slider"][data-dragging] { ... }

/* Parts mirror shared state for shadcn/Base-style selectors */
[data-slot="slider-track"][data-orientation="horizontal"] { ... }
[data-slot="slider-track"][data-orientation="vertical"] { ... }
[data-slot="slider-range"][data-orientation="horizontal"] { ... }
[data-slot="slider-range"][data-orientation="vertical"] { ... }
[data-slot="slider-track"][data-disabled] { ... }
[data-slot="slider-range"][data-disabled] { ... }
[data-slot="slider-thumb"][data-orientation="horizontal"] { ... }
[data-slot="slider-thumb"][data-orientation="vertical"] { ... }
[data-slot="slider-thumb"][data-disabled] { ... }

/* Thumb positioning (set automatically) */
[data-slot="slider-thumb"] {
  position: absolute;
  /* --position: X%; inset-inline-start/top or bottom/left are applied inline */
  /* translate is applied inline to center the thumb on the resolved visual position */
}

/* Range thumbs expose their index */
[data-slot="slider-thumb"][data-index="0"] { ... }
[data-slot="slider-thumb"][data-index="1"] { ... }

/* Range positioning (set automatically) */
[data-slot="slider-range"] {
  /* horizontal: relative + inset-inline-start/width */
  /* vertical: absolute + bottom/height */
}

/* Thumb dragging state */
[data-slot="slider-thumb"][data-dragging] { ... }

slider-track, (中文(简体) ), slider-range,以及 slider-thumb 也获得基底式内线布局 样式来自控制器。 跑步时间拥有赛道 position: relative,则 范围的起始/大小定位,拇指的绝对位置/翻译,所以 作者只需要提供视觉风格, 除非他们有意想要覆盖 那个布局行为.

何时 thumbAlignment 实值 "edge" 或者说 "edge-client-only",运行时间衡量 将拇指放入可见的轨道。 在这些模式中, --position 区域启动/ 大小 vars 代表已渲染的布局位置 超过原始价值百分比.

缩略图对齐

默认情况下,滑动拇指会以活性值为中心. 也就是说拇指可以 当值为 min 或者说 max。 。 。 .

使用 thumbAlignment 或者说 data-thumb-alignment 改变这种行为:

• "center" - 默认。 拇指以数值为中心,可能会溢出轨迹边缘.
• "edge" - 将拇指套入,使其边缘与轨迹边缘一致 min 财务报告和审定财务报表 max。 。 。 .
• "edge-client-only" - 接受基本UI API均等。 在这个香草包里 它的表现和 "edge"。 。 。 .

<div data-slot="slider" data-default-value="25" data-thumb-alignment="edge">
  <div data-slot="slider-track">
    <div data-slot="slider-range"></div>
  </div>
  <div data-slot="slider-thumb"></div>
</div>

createSlider(element, {
  defaultValue: 25,
  thumbAlignment: "edge",
});

键盘导航

无障碍

每个拇指元素都收到:

• role="slider"
• tabindex="0"
• aria-valuemin 编号 : aria-valuemax 编号 : aria-valuenow
• aria-orientation
• aria-disabled (残疾时)
• aria-label (从) data-label 或为范围自动生成)

slider-track, (中文(简体) ), slider-range,以及 slider-thumb 也镜像根的 data-orientation 财务报告和审定财务报表 data-disabled 装模作样. slider-control 可选; 当省去时,根会起到交互控制表面的作用.

许可证

麻省理工学院