@als-tp/als-react-ts-ui/dist/components/ALSSlider/ALSSlider.d.ts

A comprehensive React TypeScript UI component library built with Base UI by ALSInnovation

import React from "react";
/** Slider size variants */
export type ALSSliderSize = "sm" | "md" | "lg";
/** Slider color variants */
export type ALSSliderVariant = "primary" | "secondary" | "success" | "warning" | "error";
/** Slider orientation */
export type ALSSliderOrientation = "horizontal";
/** Props for ALSSlider.Root */
export interface ALSSliderRootProps {
    /** The size of the slider */
    size?: ALSSliderSize;
    /** The color variant of the slider */
    variant?: ALSSliderVariant;
    /** Whether the slider is disabled */
    disabled?: boolean;
    /** The orientation of the slider */
    orientation?: ALSSliderOrientation;
    /** Whether to show the value display */
    showValue?: boolean;
    /** The default value (uncontrolled) */
    defaultValue?: number | number[];
    /** The controlled value */
    value?: number | number[];
    /** Callback fired when value changes */
    onValueChange?: (value: number | number[]) => void;
    /** Callback fired when dragging ends */
    onValueCommitted?: (value: number | number[]) => void;
    /** Minimum value */
    min?: number;
    /** Maximum value */
    max?: number;
    /** Step increment */
    step?: number;
    /** Large step for Page Up/Down */
    largeStep?: number;
    /** Minimum steps between thumbs in range slider */
    minStepsBetweenValues?: number;
    /** Format options for the value display */
    format?: Intl.NumberFormatOptions;
    /** Name attribute for form submission */
    name?: string;
    /** Thumb alignment behavior */
    thumbAlignment?: "center" | "edge" | "edge-client-only";
    /** How thumbs behave when they collide */
    thumbCollisionBehavior?: "none" | "push" | "swap";
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Children elements */
    children?: React.ReactNode;
    /** Accessible label for the slider */
    "aria-label"?: string;
    /** ID of element that labels the slider */
    "aria-labelledby"?: string;
}
/** Props for ALSSlider.Control */
export interface ALSSliderControlProps {
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Children elements */
    children?: React.ReactNode;
}
/** Props for ALSSlider.Track */
export interface ALSSliderTrackProps {
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Children elements */
    children?: React.ReactNode;
}
/** Props for ALSSlider.Indicator */
export interface ALSSliderIndicatorProps {
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
}
/** Props for ALSSlider.Thumb */
export interface ALSSliderThumbProps {
    /** Index of the thumb (required for range sliders) */
    index?: number;
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Function to generate aria-label */
    getAriaLabel?: (index: number) => string;
    /** Function to generate aria-valuetext */
    getAriaValueText?: (formattedValue: string, value: number, index: number) => string;
    /** Tab index */
    tabIndex?: number;
    /** Whether this specific thumb is disabled */
    disabled?: boolean;
    /** Focus handler */
    onFocus?: React.FocusEventHandler<HTMLInputElement>;
    /** Blur handler */
    onBlur?: React.FocusEventHandler<HTMLInputElement>;
}
/** Props for ALSSlider.Value */
export interface ALSSliderValueProps {
    /** Custom render function for the value */
    children?: ((formattedValues: readonly string[], values: readonly number[]) => React.ReactNode) | null;
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
}
/** Props for ALSSlider.Label */
export interface ALSSliderLabelProps {
    /** Additional CSS class */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Label text */
    children?: React.ReactNode;
}
/**
 * ALSSlider.Root - The root container for the slider
 *
 * @example
 * ```tsx
 * <ALSSlider.Root defaultValue={50}>
 *   <ALSSlider.Control>
 *     <ALSSlider.Track>
 *       <ALSSlider.Indicator />
 *       <ALSSlider.Thumb />
 *     </ALSSlider.Track>
 *   </ALSSlider.Control>
 * </ALSSlider.Root>
 * ```
 */
export declare const ALSSliderRoot: React.FC<ALSSliderRootProps>;
/**
 * ALSSlider.Control - The interactive control area of the slider
 */
export declare const ALSSliderControl: React.ForwardRefExoticComponent<ALSSliderControlProps & React.RefAttributes<HTMLDivElement>>;
/**
 * ALSSlider.Track - The track that represents the full range
 */
export declare const ALSSliderTrack: React.ForwardRefExoticComponent<ALSSliderTrackProps & React.RefAttributes<HTMLDivElement>>;
/**
 * ALSSlider.Indicator - Visualizes the current value range
 */
export declare const ALSSliderIndicator: React.ForwardRefExoticComponent<ALSSliderIndicatorProps & React.RefAttributes<HTMLDivElement>>;
/**
 * ALSSlider.Thumb - The draggable thumb element
 */
export declare const ALSSliderThumb: React.ForwardRefExoticComponent<ALSSliderThumbProps & React.RefAttributes<HTMLDivElement>>;
/**
 * ALSSlider.Value - Displays the current value
 */
export declare const ALSSliderValue: React.FC<ALSSliderValueProps>;
/**
 * ALSSlider.Label - A label for the slider
 */
export declare const ALSSliderLabel: React.FC<ALSSliderLabelProps>;
//# sourceMappingURL=ALSSlider.d.ts.map