Files
v10/dist/dev/dom/ui/slider.d.ts

69 lines
3.0 KiB
TypeScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { SliderInput, SliderState } from "../../core/ui/slider/slider-core.js";
import { UIKeyboardEvent, UIPointerEvent } from "./event.js";
import { State } from "@videojs/store";
//#region src/dom/ui/slider.d.ts
interface SliderOptions {
/** Element reference for getBoundingClientRect() and pointer capture. */
getElement: () => HTMLElement;
/** Optional thumb element reference for programmatic focus on pointerdown. */
getThumbElement?: (() => HTMLElement | null) | undefined;
getOrientation: () => 'horizontal' | 'vertical';
isRTL: () => boolean;
isDisabled: () => boolean;
/** Current value as 0100 percent. Used by keyboard stepping. */
getPercent: () => number;
/** Step size as 0100 percent. Arrow keys. */
getStepPercent: () => number;
/** Large step size as 0100 percent. Page Up/Down, Shift+Arrow. */
getLargeStepPercent: () => number;
/**
* Leading+trailing throttle (ms) for `onValueChange` during drag. When
* `> 0`, `onValueChange` fires immediately on the first drag move (leading
* edge), then at most once per window during subsequent moves. `0` (default)
* disables throttling — `onValueChange` fires on every pointermove.
*/
changeThrottle?: number | undefined;
/** Adjust a raw 0100 percent for thumb alignment. Enables `adjustForAlignment()`. */
adjustPercent?: ((rawPercent: number, thumbSize: number, trackSize: number) => number) | undefined;
/** Fires continuously as the value changes (every pointermove during drag, keyboard steps). */
onValueChange?: ((percent: number) => void) | undefined;
/** Fires once when the user commits the value (pointer release, keyboard step). */
onValueCommit?: ((percent: number) => void) | undefined;
onDragStart?: (() => void) | undefined;
onDragEnd?: (() => void) | undefined;
/** Called when the root element resizes (e.g. gains layout inside a popover). */
onResize?: (() => void) | undefined;
}
interface SliderRootProps {
onPointerDown: (event: UIPointerEvent) => void;
onPointerMove: (event: UIPointerEvent) => void;
onPointerUp: (event: UIPointerEvent) => void;
onPointerLeave: (event: UIPointerEvent) => void;
onLostPointerCapture: () => void;
}
interface SliderRootStyle extends Record<string, string> {
touchAction: string;
userSelect: string;
}
interface SliderThumbProps {
onKeyDown: (event: UIKeyboardEvent) => void;
onFocus: () => void;
onBlur: () => void;
}
interface SliderApi {
input: State<SliderInput>;
rootProps: SliderRootProps;
rootStyle: SliderRootStyle;
thumbProps: SliderThumbProps;
/**
* Adjust `fillPercent` and `pointerPercent` for edge thumb alignment using
* live DOM measurements from the root/thumb elements. No-op when
* `adjustPercent` was not provided or `thumbAlignment` is not `'edge'`.
*/
adjustForAlignment: <S extends SliderState>(state: S) => S;
destroy: () => void;
}
declare function createSlider(options: SliderOptions): SliderApi;
//#endregion
export { SliderApi, SliderOptions, SliderRootProps, SliderRootStyle, SliderThumbProps, createSlider };
//# sourceMappingURL=slider.d.ts.map