Npmlibrary

Slider

预计阅读时间: 3 分钟

具有轨道、填充、滑块、预览和值部件的可组合滑块基础组件。

结构

<Slider.Root>
  <Slider.Track>
    <Slider.Fill />
  </Slider.Track>
  <Slider.Thumb />
  <Slider.Preview>
    <Slider.Value type="pointer" />
  </Slider.Preview>
</Slider.Root>

行为

基础 Slider 提供通用的范围输入。它管理值、指针跟踪和拖动交互。特定领域的滑块如 TimeSlider 和 VolumeSlider 在此基础上扩展了媒体特定的绑定。

滑块支持通过 orientation 属性设置垂直方向（默认为 "horizontal"）。

样式

使用 CSS 自定义属性定位填充、滑块和预览元素：

.slider-fill {
  width: var(--media-slider-fill);
}

.slider-thumb {
  left: var(--media-slider-fill);
}

根据交互状态设置样式：

.slider[data-interactive] .slider-track {
  height: 6px;
}
.slider[data-pointing] .slider-preview {
  opacity: 1;
}

无障碍

渲染 role="slider" 和自动的 ARIA 属性（aria-valuemin、aria-valuemax、aria-valuenow、aria-valuetext）。可通过 label 属性覆盖标签。键盘控件：

Arrow Left / Arrow Right：按 step 增量步进
Page Up / Page Down：按 largeStep 增量步进
Home：跳到最小值
End：跳到最大值

示例

基本用法

带有轨道、填充和滑块的滑块。

import { Slider } from '@videojs/react';

function BasicSlider() {
  return (
    <Slider.Root>
      <Slider.Track>
        <Slider.Fill />
      </Slider.Track>
      <Slider.Thumb />
    </Slider.Root>
  );
}

带预览

带有指针跟踪预览的滑块，显示当前指针位置的值。

<Slider.Root>
  <Slider.Track>
    <Slider.Fill />
  </Slider.Track>
  <Slider.Thumb />
  <Slider.Preview>
    <Slider.Value type="pointer" />
  </Slider.Preview>
</Slider.Root>

API 参考

复合组件

部件	描述
`Slider.Root`	滑块根组件，管理状态和交互
`Slider.Track`	滑块轨道背景
`Slider.Fill`	填充部分，表示当前值
`Slider.Buffer`	缓冲指示器
`Slider.Thumb`	可拖动的滑块手柄
`Slider.Preview`	悬停预览容器
`Slider.Thumbnail`	预览中的缩略图
`Slider.Value`	值显示（current 或 pointer）

Slider.Root 属性

属性	类型	默认值	描述
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	滑块方向
`label`	`string`	自动	aria-label
`step`	`number`	`1`	键盘步进增量
`largeStep`	`number`	`10`	大步进增量（Page Up/Down）

状态

状态	类型	描述
`value`	`number`	当前值
`interactive`	`boolean`	是否正在交互
`pointing`	`boolean`	指针是否在滑块上

Data 属性

属性	值	描述
`data-interactive`	-	正在交互时存在
`data-pointing`	-	指针悬停时存在

CSS 自定义属性

属性	描述
`--media-slider-fill`	填充百分比
`--media-slider-pointer`	指针位置百分比
`--media-slider-buffer`	缓冲百分比

参见

TimeSlider - 时间滑块
VolumeSlider - 音量滑块

#Slider

#结构

#行为

#样式

#无障碍

#示例

#基本用法

#带预览

#API 参考

#复合组件

#Slider.Root 属性

#状态

#Data 属性

#CSS 自定义属性

#参见