melt/dist/builders/Slider.svelte.d.ts

The next generation of Melt UI. Built for Svelte 5.

import type { MaybeGetter } from "../types";
export type SliderProps = {
    /**
     * The minimum value of the slider.
     *
     * @default 0
     */
    min?: MaybeGetter<number | undefined>;
    /**
     * The maximum value of the slider.
     *
     * @default 100
     */
    max?: MaybeGetter<number | undefined>;
    /**
     * The orientation of the slider.
     *
     * @default "horizontal"
     */
    orientation?: MaybeGetter<"horizontal" | "vertical" | undefined>;
    /**
     * The step size of the slider.
     *
     * @default 1
     */
    step?: MaybeGetter<number | undefined>;
    /**
     * The default value for `tabs.value`
     *
     * When passing a getter, it will be used as source of truth,
     * meaning that `tabs.value` only changes when the getter returns a new value.
     *
     * If omitted, it will use the first tab as default.
     *
     * @default undefined
     */
    value?: MaybeGetter<number | undefined>;
    /**
     * Called when the `Slider` instance tries to change the active tab.
     */
    onValueChange?: (active: number) => void;
};
export declare class Slider {
    #private;
    readonly min: number;
    readonly max: number;
    readonly orientation: "horizontal" | "vertical";
    readonly step: number;
    ids: {
        root: string;
        thumb: string;
    };
    constructor(props?: SliderProps);
    /** The value of the slider. */
    get value(): number;
    set value(value: number);
    /**
     * The root of the slider.
     * Any cursor interaction along this element will change the slider's values.
     **/
    get root(): {
        readonly "data-dragging": "" | undefined;
        readonly "data-value": number;
        readonly "data-orientation": "horizontal" | "vertical";
        readonly "aria-valuenow": number;
        readonly "aria-valuemin": number;
        readonly "aria-valuemax": number;
        readonly "aria-orientation": "horizontal" | "vertical";
        readonly style: `--percentage: ${string}; --percentage-inv: ${string}; touch-action: ${string}`;
        readonly tabindex: 0;
        readonly role: "slider";
        readonly "data-melt-slider-root": "";
        readonly id: string;
        readonly onpointerdown: (e: PointerEvent) => void;
        readonly onkeydown: (e: KeyboardEvent) => void;
    };
    /** The slider's thumb, positioned at the end of the range. */
    get thumb(): {
        readonly "data-dragging": "" | undefined;
        readonly "data-value": number;
        readonly "data-orientation": "horizontal" | "vertical";
        readonly "data-melt-slider-thumb": "";
        readonly id: string;
        readonly tabindex: 0;
    };
}