its-just-ui/dist/components/Slider/Slider.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React } from 'react';

export interface SliderValue {
    value: number;
    percentage: number;
}
export interface SliderRange {
    min: number;
    max: number;
    step: number;
}
export interface SliderMark {
    value: number;
    label?: React.ReactNode;
    icon?: React.ReactNode;
    onClick?: () => void;
}
export interface SliderContextValue {
    values: SliderValue[];
    range: SliderRange;
    isRange: boolean;
    disabled: boolean;
    readOnly: boolean;
    focused: boolean;
    dragging: boolean;
    hovered: boolean;
    onChange: (values: number[]) => void;
    onFocus: () => void;
    onBlur: () => void;
    onDragStart: () => void;
    onDragEnd: () => void;
    getValueFromPercentage: (percentage: number) => number;
    getPercentageFromValue: (value: number) => number;
    snapToStep: (value: number) => number;
    formatValue: (value: number) => string;
    variant: 'default' | 'minimal' | 'filled' | 'track-only' | 'thumbless' | 'removed-track' | 'inverted-track';
    size: 'sm' | 'md' | 'lg';
    status: 'default' | 'success' | 'warning' | 'error' | 'info';
}
export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value' | 'defaultValue'> {
    value?: number | number[];
    defaultValue?: number | number[];
    min?: number;
    max?: number;
    step?: number;
    disabled?: boolean;
    readOnly?: boolean;
    required?: boolean;
    name?: string;
    range?: boolean;
    variant?: 'default' | 'minimal' | 'filled' | 'track-only' | 'thumbless' | 'removed-track' | 'inverted-track';
    size?: 'sm' | 'md' | 'lg';
    status?: 'default' | 'success' | 'warning' | 'error' | 'info';
    label?: React.ReactNode;
    labelIcon?: React.ReactNode;
    showTooltip?: boolean;
    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
    formatTooltip?: (value: number) => string;
    valueLabelDisplay?: 'auto' | 'on' | 'off';
    marks?: SliderMark[];
    showMarks?: boolean;
    markStep?: number;
    markIcons?: boolean;
    onChange?: (values: number[]) => void;
    onChangeEnd?: (values: number[]) => void;
    onFocus?: () => void;
    onBlur?: () => void;
    onDragStart?: () => void;
    onDragEnd?: () => void;
    onKeyDown?: (event: React.KeyboardEvent) => void;
    transition?: 'none' | 'smooth' | 'bounce';
    transitionDuration?: number;
    renderThumb?: (value: SliderValue, index: number) => React.ReactNode;
    renderMark?: (mark: SliderMark) => React.ReactNode;
    children?: React.ReactNode;
}
export declare const useSlider: () => SliderContextValue;
export interface SliderTrackProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
}
declare const SliderTrack: React.ForwardRefExoticComponent<SliderTrackProps & React.RefAttributes<HTMLDivElement>>;
export interface SliderRangeProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
}
declare const SliderRange: React.ForwardRefExoticComponent<SliderRangeProps & React.RefAttributes<HTMLDivElement>>;
export interface SliderThumbProps extends React.HTMLAttributes<HTMLDivElement> {
    value: SliderValue;
    index: number;
    renderThumb?: (value: SliderValue, index: number) => React.ReactNode;
    showTooltip?: boolean;
    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
    onValueChange?: (value: number) => void;
    onDragStart?: () => void;
    onDragEnd?: () => void;
    onTooltipVisibilityChange?: (visible: boolean) => void;
}
declare const SliderThumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<HTMLDivElement>>;
export interface SliderLabelProps extends React.HTMLAttributes<HTMLLabelElement> {
    children: React.ReactNode;
}
declare const SliderLabel: React.ForwardRefExoticComponent<SliderLabelProps & React.RefAttributes<HTMLLabelElement>>;
export interface SliderInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
    index?: number;
}
declare const SliderInput: React.ForwardRefExoticComponent<SliderInputProps & React.RefAttributes<HTMLInputElement>>;
export interface SliderMarksProps extends React.HTMLAttributes<HTMLDivElement> {
    marks?: SliderMark[];
    markStep?: number;
    markIcons?: boolean;
    renderMark?: (mark: SliderMark) => React.ReactNode;
}
declare const SliderMarks: React.ForwardRefExoticComponent<SliderMarksProps & React.RefAttributes<HTMLDivElement>>;
interface SliderComponent extends React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>> {
    Track: typeof SliderTrack;
    Range: typeof SliderRange;
    Thumb: typeof SliderThumb;
    Label: typeof SliderLabel;
    Input: typeof SliderInput;
    Marks: typeof SliderMarks;
}
declare const SliderComponent: SliderComponent;
export { SliderComponent as Slider };