UI: Volume Slider Component

[mihar-22]

Volume control slider connecting to the Media Store's audio state. Extends base Slider component.

Blocked by:

• UI: Slider Component #275

Usage

React

<VolumeSlider.Root>
  <VolumeSlider.Track>
    <VolumeSlider.Indicator />
    <VolumeSlider.Thumb />
  </VolumeSlider.Track>
</VolumeSlider.Root>

<VolumeSlider.Root>
  <VolumeSlider.Track>
    <VolumeSlider.Indicator />
    <VolumeSlider.Thumb />
  </VolumeSlider.Track>
  <VolumeSlider.Preview>
    <VolumeSlider.Value />
  </VolumeSlider.Preview>
</VolumeSlider.Root>

<VolumeSlider.Root orientation="vertical">
  <VolumeSlider.Track>
    <VolumeSlider.Indicator />
    <VolumeSlider.Thumb />
  </VolumeSlider.Track>
</VolumeSlider.Root>

HTML

<media-volume-slider>
  <div class="track">
    <div class="indicator"></div>
    <div class="thumb"></div>
  </div>
</media-volume-slider>

<media-volume-slider>
  <div class="track">
    <div class="indicator"></div>
    <div class="thumb"></div>
  </div>
  <media-slider-preview>
    <media-slider-value></media-slider-value>
  </media-slider-preview>
</media-volume-slider>

API

VolumeSlider.Root

Extends Slider.Root (#275). Connects to audio feature state.

Extended Props

Prop	Type	Default	Description
step	number	0.01	Step increment (overrides Slider default)
keyStep	number	0.05	Keyboard step increment (overrides Slider default)

Extended Data Attributes

Attribute	Description
data-muted	Present when audio is muted

Other Parts

VolumeSlider.Track, VolumeSlider.Indicator, VolumeSlider.Thumb, VolumeSlider.Preview, VolumeSlider.Value — see Slider API (#275).

Tasks

Core (@videojs/core)

• Implement VolumeSliderCore extending SliderCore
• Connect to audio feature state
• Integrate optimistic updates

DOM (@videojs/core/dom)

• Implement getVolumeSliderRootProps(params) extending base slider props
• Define VolumeSliderDataAttributes interface

React (@videojs/react)

• Implement VolumeSlider.Root component
• Re-export Slider parts as VolumeSlider parts

HTML (@videojs/html)

• Implement VolumeSliderElement extending SliderElement

Testing

• Core unit tests
• Test audio state connection
• Add conformance test suite
• Add React conformance test
• Add HTML conformance test

Documentation

• Create /docs/react/components/volume-slider page
• Create /docs/html/components/volume-slider page

Design Notes

Muted State

When muted, the slider shows data-muted. Dragging the slider unmutes:

onDragStart() {
  if (this.#audio.state.muted) {
    this.#audio.request.toggleMute();
  }
}

Optimistic Updates

Volume slider uses optimistic updates for responsive feedback. While dragging, value reflects the pointer position immediately rather than waiting for engine confirmation:|

const { value, setValue } = useOptimistic(audio.request.changeVolume);

See #228 for details.