Npmlibrary

VolumeSlider

预计阅读时间: 3 分钟

用于控制媒体播放音量的滑块组件。

结构

<VolumeSlider.Root />

嵌套子组件以完全控制滑块的 DOM 结构：

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

行为

控制媒体音量级别。滑块将其 0-100 的内部范围映射到媒体的 0-1 音量刻度。当媒体静音时，填充级别降至 0，无论存储的音量值如何。

样式

使用 CSS 自定义属性设置填充和指针级别：

.volume-slider::before {
  width: calc(var(--media-slider-fill) * 1%);
}

无障碍

渲染 role="slider" 和自动的 aria-label："Volume"。可通过 label 属性覆盖。键盘控件：

Arrow Left / Arrow Right：按 step 增量步进
Page Up / Page Down：按 largeStep 增量步进
Home：设置音量为 0
End：设置音量为最大

滚轮支持：

鼠标滚轮 / 触控板滚动：按 wheelStep 增量调整音量（默认 5）

示例

基本用法

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

function Controls() {
  return <VolumeSlider.Root />;
}

完整部件

包含轨道、填充条、可拖动手柄和悬停时显示音量百分比的工具提示。

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

API 参考

复合组件

部件	描述
`VolumeSlider.Root`	音量滑块根组件
`VolumeSlider.Track`	滑块轨道背景
`VolumeSlider.Fill`	填充部分，表示当前音量
`VolumeSlider.Thumb`	可拖动的滑块手柄
`VolumeSlider.Preview`	悬停预览容器
`VolumeSlider.Value`	值显示

VolumeSlider.Root 属性

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

状态

状态	类型	描述
`value`	`number`	当前音量值
`muted`	`boolean`	是否静音

Data 属性

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

CSS 自定义属性

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

参见

MuteButton - 静音按钮
TimeSlider - 时间滑块
Slider - 滑块基础组件

#VolumeSlider

#结构

#行为

#样式

#无障碍

#示例

#基本用法

#完整部件

#API 参考

#复合组件

#VolumeSlider.Root 属性

#状态

#Data 属性

#CSS 自定义属性

#参见