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

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

import { DisposalBin } from '@vidstack/foundation';
import { type CSSResultGroup, LitElement, type PropertyValues, type TemplateResult } from 'lit';
import { MediaRemoteControl } from '../../media';
/**
 * The direction to move the thumb, associated with key symbols.
 */
export declare enum SliderKeyDirection {
    Left = -1,
    ArrowLeft = -1,
    Up = -1,
    ArrowUp = -1,
    Right = 1,
    ArrowRight = 1,
    Down = 1,
    ArrowDown = 1
}
/**
 * A custom built `input[type="range"]` that is cross-browser friendly, ARIA friendly, mouse/touch
 * friendly and easily stylable. This component allows users to input numeric values between a
 * minimum and maximum value.
 *
 * 💡 The following attributes are also available on the host element:
 *
 * - `pointing`: Whether a device pointer is within the slider bounds.
 * - `dragging`: Whether the slider thumb is currently being dragged.
 * - `interactive`: When either `pointing` or `dragging` is true.
 *
 * @tagname vds-slider
 * @slot - Used to pass in additional content inside the slider.
 * @cssprop --vds-slider-fill-rate - The ratio of the slider that is filled (eg: `0.3`).
 * @cssprop --vds-slider-fill-value - The current amount of the slider that is filled (eg: `30`).
 * @cssprop --vds-slider-fill-percent - The fill rate expressed as a percentage such as (eg: `30%`).
 * @cssprop --vds-slider-pointer-rate - The ratio of the slider that is filled up to the device pointer.
 * @cssprop --vds-slider-pointer-value - The amount of the slider that is filled up to the device pointer.
 * @cssprop --vds-slider-pointer-percent - The pointer rate expressed as a percentage.
 * @events ./events.ts
 * @example
 * ```html
 * <vds-slider
 *   min="0"
 *   max="100"
 *   value="50"
 * >
 *  <div class="thumb"></div>
 * </vds-slider>
 * ```
 */
export declare class SliderElement extends LitElement {
    static get styles(): CSSResultGroup;
    static get parts(): string[];
    constructor();
    protected readonly _sliderStoreProvider: import("@vidstack/foundation").ContextProviderController<{
        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: import("@vidstack/foundation").ReadableStore<boolean>;
    }>;
    get store(): {
        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: import("@vidstack/foundation").ReadableStore<boolean>;
    };
    /**
     * The lowest slider value in the range of permitted values.
     */
    get min(): number;
    set min(newMin: number);
    /**
     * The greatest slider value in the range of permitted values.
     */
    get max(): number;
    set max(newMax: number);
    /**
     * Whether the slider should be disabled (non-interactive).
     */
    disabled: boolean;
    /**
     * The current slider value.
     */
    value: number;
    /**
     * A number that specifies the granularity that the slider value must adhere to.
     */
    get step(): number;
    set step(newStep: number);
    protected _step: number;
    /**
     * ♿ **ARIA:** A number that specifies the number of steps taken when interacting with
     * the slider via keyboard.
     */
    get keyboardStep(): number;
    set keyboardStep(newStep: number);
    protected _keyboardStep: number;
    /**
     * ♿ **ARIA:** A number that will be used to multiply the `keyboardStep` when the `Shift` key
     * is held down and the slider value is changed by pressing `LeftArrow` or `RightArrow`. Think
     * of it as `keyboardStep * shiftKeyMultiplier`.
     */
    shiftKeyMultiplier: number;
    /**
     * ♿ **ARIA:** Whether custom `aria-valuemin`, `aria-valuenow`, `aria-valuemax`, and
     * `aria-valuetext` values will be provided.
     */
    customValueText: boolean;
    /**
     * Whether the slider thumb is currently being dragged.
     *
     * @default false
     */
    get isDragging(): boolean;
    /**
     * The current value to range ratio.
     *
     * @default 0.5
     * @example
     * `min` = 0
     * `max` = 10
     * `value` = 5
     * `range` = 10 (max - min)
     * `fillRate` = 0.5 (result)
     */
    get fillRate(): number;
    /**
     * The fill rate expressed as a percentage (`fillRate * 100`).
     *
     * @default 50
     */
    get fillPercent(): number;
    /**
     * The value at which the device pointer is pointing to inside the slider.
     *
     * @default 0
     */
    get pointerValue(): number;
    /**
     * The pointer value to range ratio.
     *
     * @default 0
     */
    get pointerRate(): number;
    /**
     * The pointer rate expressed as a percentage (`pointerRate * 100`).
     *
     * @default 0
     */
    get pointerPercent(): number;
    protected _mediaRemote: MediaRemoteControl;
    protected _disconnectDisposal: DisposalBin;
    connectedCallback(): void;
    protected willUpdate(changedProperties: PropertyValues): void;
    disconnectedCallback(): void;
    protected readonly _handlePointerEnter: void;
    protected readonly _handlePointerMove: void;
    protected readonly _handlePointerLeave: void;
    protected readonly _handlePointerDown: void;
    protected readonly _handleKeydown: void;
    protected readonly _handleFillValueChange: void;
    protected _updateFillCSSProps(): void;
    protected readonly _handlePointerValueChange: void;
    protected _updatePointerCSSProps(): void;
    protected render(): TemplateResult;
    protected _renderSlider(): TemplateResult;
    protected _renderDefaultSlot(): TemplateResult;
    protected _setupAriaAttrs(): void;
    protected _updateAriaValueAttrs(): void;
    protected _getValueMin(): string;
    protected _getValueNow(): string;
    protected _getValueMax(): string;
    protected _getValueText(): string;
    protected _startDragging(event: PointerEvent): void;
    protected readonly _onDrag: import("@vidstack/foundation").RafThrottledFunction<(event: PointerEvent) => void>;
    protected _stopDragging(event: PointerEvent): void;
    protected readonly _handleDocumentPointerUp: void;
    protected readonly _handleDocumentTouchMove: void;
    protected readonly _handleDocumentPointerMove: void;
    protected _getClampedValue(value: number): number;
    protected _getValueFromRate(rate: number): number;
    protected _getValueBasedOnThumbPosition(event: PointerEvent): number;
    protected _lastDispatchedValue: number;
    protected readonly _dispatchValueChange: import("@vidstack/foundation").RafThrottledFunction<(event?: Event | undefined) => void>;
    protected _lastDispatchedPointerValue: number;
    protected readonly _dispatchPointerValueChange: import("@vidstack/foundation").RafThrottledFunction<(event: Event) => void>;
}
//# sourceMappingURL=SliderElement.d.ts.map