@furystack/shades-common-components/esm/components/inputs/slider.d.ts

Common UI components for FuryStack Shades

import type { Palette } from '../../services/theme-provider-service.js';
/**
 * Represents a mark on the slider track
 */
export type SliderMark = {
    /** The value at which to place the mark */
    value: number;
    /** Optional label text displayed near the mark */
    label?: string;
};
/**
 * Props for the Slider component
 */
export type SliderProps = {
    /**
     * Current value. A single number for standard mode, or a [min, max] tuple for range mode.
     */
    value?: number | [number, number];
    /**
     * Minimum allowed value
     * @default 0
     */
    min?: number;
    /**
     * Maximum allowed value
     * @default 100
     */
    max?: number;
    /**
     * Step increment. Set to 0 for continuous (no snapping).
     * @default 1
     */
    step?: number;
    /**
     * Whether the slider is disabled
     */
    disabled?: boolean;
    /**
     * The palette color for the slider
     * @default 'primary'
     */
    color?: keyof Palette;
    /**
     * Whether to render the slider vertically
     */
    vertical?: boolean;
    /**
     * Display marks on the slider.
     * `true` auto-generates a mark at each step; an array of SliderMark objects places custom marks.
     */
    marks?: boolean | SliderMark[];
    /**
     * Callback fired when the value changes during interaction
     */
    onValueChange?: (value: number | [number, number]) => void;
    /**
     * The name attribute for a hidden input (form integration)
     */
    name?: string;
};
export declare const Slider: (props: SliderProps & Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
//# sourceMappingURL=slider.d.ts.map