vidstack/dist/types/player/ui/sliders/volume-slider.d.ts

Build awesome media experiences on the web.

import { type HTMLCustomElement } from 'maverick.js/element';
import type { SliderDragValueChangeEvent, SliderValueChangeEvent } from './slider/api/events';
import { Slider, type SliderAPI } from './slider/slider';
declare global {
    interface MaverickElements {
        'media-volume-slider': MediaVolumeSliderElement;
    }
}
/**
 * A slider control that lets the user specify their desired volume level.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/sliders/volume-slider}
 * @slot preview - Used to insert a slider preview.
 * @example
 * ```html
 * <media-volume-slider></media-volume-slider>
 * ```
 * @example
 * ```html
 * <media-volume-slider>
 *   <media-slider-value
 *     type="pointer"
 *     format="percent"
 *   ></media-slider-value>
 * </media-volume-slider>
 * ```
 */
export declare class VolumeSlider extends Slider<VolumeSliderAPI> {
    static el: import("maverick.js/element").CustomElementDefinition<VolumeSliderAPI>;
    protected _readonly: boolean;
    protected onAttach(el: HTMLElement): void;
    protected _watchVolume(): void;
    protected _throttleVolumeChange: ((event: SliderValueChangeEvent | SliderDragValueChangeEvent) => void) & {
        cancel: () => void;
        flush: () => void;
    };
    protected _onVolumeChange(event: SliderValueChangeEvent | SliderDragValueChangeEvent): void;
    _onValueChange(event: SliderValueChangeEvent): void;
    _onDragValueChange(event: SliderDragValueChangeEvent): void;
    protected _getARIAValueMin(): number;
    protected _getARIAValueMax(): number;
}
export interface MediaVolumeSliderElement extends HTMLCustomElement<VolumeSlider> {
}
export interface VolumeSliderAPI extends SliderAPI {
}