@aidenlx/player/types/ui/slider/SliderValueTextElement.d.ts

Headless web components that make integrating media on the a web a breeze.

import { DisposalBin, ReadableStore } from '@vidstack/foundation';
import { type CSSResultGroup, LitElement, type PropertyValues } from 'lit';
/**
 * Outputs the current slider value as text.
 *
 * @tagname vds-slider-value-text
 * @example
 * ```html
 * <vds-slider-value-text
 *   type="current"
 * ></vds-slider-value-text>
 * ```
 * @example
 * ```html
 * <vds-slider-value-text
 *   format="time"
 *   show-hours
 *   pad-hours
 * ></vds-slider-value-text>
 * ```
 * @example
 * ```html
 * <vds-slider-value-text
 *   format="percent"
 *   decimal-places="2"
 * ></vds-slider-value-text>
 * ```
 */
export declare class SliderValueTextElement extends LitElement {
    static get styles(): CSSResultGroup;
    protected _disposal: DisposalBin;
    protected _sliderStoreConsumer: import("@vidstack/foundation").ContextConsumerController<{
        value: import("@vidstack/foundation").WritableStore<number>;
        pointerValue: import("@vidstack/foundation").WritableStore<number>;
        min: import("@vidstack/foundation").WritableStore<number>;
        max: import("@vidstack/foundation").WritableStore<number>;
        dragging: import("@vidstack/foundation").WritableStore<boolean>;
        pointing: import("@vidstack/foundation").WritableStore<boolean>;
        interactive: ReadableStore<boolean>;
    }>;
    protected get _sliderStore(): {
        value: import("@vidstack/foundation").WritableStore<number>;
        pointerValue: import("@vidstack/foundation").WritableStore<number>;
        min: import("@vidstack/foundation").WritableStore<number>;
        max: import("@vidstack/foundation").WritableStore<number>;
        dragging: import("@vidstack/foundation").WritableStore<boolean>;
        pointing: import("@vidstack/foundation").WritableStore<boolean>;
        interactive: ReadableStore<boolean>;
    };
    protected __value: number;
    /**
     * Whether to use the slider's current value, or pointer value.
     */
    type: 'current' | 'pointer';
    /**
     * Determines how the value is formatted.
     *
     * @default undefined
     */
    format?: 'percent' | 'time';
    /**
     * Whether the time should always show the hours unit, even if the time is less than
     * 1 hour. Only available if the `format` attribute is set to `time`.
     *
     * @default false
     * @example `20:30` -> `0:20:35`
     */
    showHours: boolean;
    /**
     * Whether the hours unit should be padded with zeroes to a length of 2. Only available if
     * the `format` attribute is set to `time`.
     *
     * @default false
     * @example `1:20:03` -> `01:20:03`
     */
    padHours: boolean;
    /**
     * Round the value when formatted as a percentage to the given number of decimal places. Only
     * available if `format` attribute is `percent`.
     *
     * @default 2
     */
    decimalPlaces: number;
    connectedCallback(): void;
    protected update(changedProperties: PropertyValues): void;
    disconnectedCallback(): void;
    protected render(): import("lit").TemplateResult<1>;
    protected _handleTypeChange(): void;
    protected _createPercentStore(valueStore: ReadableStore<number>): ReadableStore<number>;
    protected _getValueText(): string;
    protected _getPercentFormat(): string;
    protected _getTimeFormat(): string;
}
//# sourceMappingURL=SliderValueTextElement.d.ts.map