1. Sliders
  2. Volume Slider

Sliders

Volume Slider

This component is used to create a range input for controlling the volume of media.

INFO

📖 The <media-slider> guide contains background documentation that can be used when working with the volume slider component.

Usage

The <media-volume-slider> component receives volume updates from the provider through the media store, and dispatches a media-volume-change-request event to request updating the current volume level on the provider as the slider value changes.

The media volume range is between 0 (min) and 1 (max), but on the slider it's between 0 and 100. The conversion is automatically handled by this component.

          
        

Preview

          
        

Orientation

You can change the orientation of the slider to vertical by setting the aria-orientation attribute like so:

          
        

Keyboard

The volume slider will receive keyboard input when focused. The interaction keys are based on standard accessibility guidelines.

The key-step and shift-key-multiplier can be used to configure how much to decrease/increase volume percentage by on key press like so:

          
        

In the snippet above, each keyboard step (e.g., pressing left or right arrow key) will respectively decrease/increase volume by 5%. Holding shift will multiply by the step by 2, so a change of 10%.

👉 You can configure global volume keys on the player.

Styling

You can override the default styles with CSS like so:

css
        media-volume-slider {
}

/* Apply styles when device pointer is within slider bounds. */
media-volume-slider[data-pointing] {
}

/* Apply styles when slider thumb is being dragged. */
media-volume-slider[data-dragging] {
}

/* Shorthand for both dragging and pointing. */
media-volume-slider[data-interactive] {
}

/** Apply styles to preview. */
media-volume-slider [slot='preview'] {
}

      

Parts

css
        /* Apply styles to all tracks. */
media-volume-slider [part~='track'] {
}

/* Apply styles to track when interactive. */
media-volume-slider[data-interactive] [part~='track'] {
}

/* Apply styles to track fill (played portion of slider). */
media-volume-slider [part~='track-fill'] {
}

/* Apply styles to thumb container. */
media-volume-slider [part='thumb-container'] {
}

/* Apply styles to slider thumb. */
media-volume-slider [part='thumb'] {
}

      

Focus

css
        media-volume-slider {
  /* box shadow */
  --media-focus-ring: 0 0 0 4px rgb(78 156 246);
}

/* Apply styles to slider when focused via keyboard. */
media-volume-slider[data-focus] {
}

/* Apply styles to slider track when focused via keyboard. */
media-volume-slider[data-focus] [part='track'] {
}

      

CSS Variables

See the slider CSS variables for simple customization of the default slider styles.

Tailwind

Horizontal

A horizontal volume slider built with Tailwind:

          
        

Vertical

A vertical volume slider built with Tailwind:

          
        

Component API

Props

Name Type

trackClass

string

trackFillClass

string

trackProgressClass

string

thumbContainerClass

string

thumbClass

string

min

number

max

number

disabled

boolean

value

number

step

number

keyStep

number

shiftKeyMultiplier

number

Events

Name Type

drag-start

SliderDragStartEvent

drag-end

SliderDragEndEvent

value-change

SliderValueChangeEvent

drag-value-change

SliderDragValueChangeEvent

pointer-value-change

SliderPointerValueChangeEvent
Name Description

preview

Used to insert a slider preview.

Name Type

--media-slider-height

string | number

--media-slider-thumb-size

string | number

--media-slider-focused-thumb-size

string | number

--media-slider-track-height

string | number

--media-slider-focused-track-height

string | number

--slider-fill-percent

readonly string

--slider-pointer-percent

readonly string
Name Description

Instance Props

Name Type

state

readonly SliderState

Instance Methods

Name Type

subscribe

(callback: (state: SliderState) => Maybe<Dispose>) => Unsubscribe