@yamada-ui/slider/dist/slider.d.ts

Yamada UI slider components

import * as _yamada_ui_core from '@yamada-ui/core';
import { ThemeProps, HTMLUIProps, CSSUIProps, CSSUIObject, PropGetter, RequiredPropGetter, HTMLProps } from '@yamada-ui/core';
import { FormControlOptions } from '@yamada-ui/form-control';
import { Merge } from '@yamada-ui/utils';

declare const getThumbSize: (thumbSize: CSSUIProps["boxSize"] | undefined, styles: {
    [key: string]: CSSUIObject | undefined;
}) => CSSUIProps["boxSize"] | undefined;
interface UseSliderOptions {
    /**
     * The base `id` to use for the slider.
     */
    id?: string;
    /**
     * The name attribute of the hidden `input` field.
     * This is particularly useful in forms.
     */
    name?: string;
    /**
     * The initial value of the slider.
     */
    defaultValue?: number;
    /**
     * If `false`, the slider handle will not capture focus when value changes.
     *
     * @default true
     */
    focusThumbOnChange?: boolean;
    /**
     * This is used to format the value so that screen readers
     * can speak out a more human-friendly value.
     *
     * It is used to set the `aria-valuetext` property of the input.
     */
    getAriaValueText?: (value: number) => string | undefined;
    /**
     * If `true`, the value will be incremented or decremented in reverse.
     *
     * @deprecated Use `reversed` instead.
     */
    isReversed?: boolean;
    /**
     * The maximum allowed value of the slider. Cannot be less than min.
     *
     * @default 100
     */
    max?: number;
    /**
     * The minimum allowed value of the slider. Cannot be greater than max.
     *
     * @default 0
     */
    min?: number;
    /**
     * The orientation of the slider.
     *
     * @default 'horizontal'
     */
    orientation?: "horizontal" | "vertical";
    /**
     * If `true`, the value will be incremented or decremented in reverse.
     */
    reversed?: boolean;
    /**
     * The step in which increments or decrements have to be made.
     *
     * @default 1
     */
    step?: number;
    /**
     * The CSS `box-size` property.
     * Used for calculating the width, height, and percentage of the container element.
     */
    thumbSize?: CSSUIProps["boxSize"];
    /**
     * The value of the slider.
     */
    value?: number;
    /**
     * Function called whenever the slider value changes.
     */
    onChange?: (value: number) => void;
    /**
     * Function called when the user is done selecting a new value.
     */
    onChangeEnd?: (value: number) => void;
    /**
     * Function called when the user starts selecting a new value.
     */
    onChangeStart?: (value: number) => void;
}
interface UseSliderProps extends Merge<HTMLUIProps, FormControlOptions & UseSliderOptions> {
}
declare const useSlider: ({ focusThumbOnChange, ...props }: UseSliderProps) => {
    dragging: boolean;
    focused: boolean;
    /**
     * @deprecated Use `dragging` instead.
     */
    isDragging: boolean;
    /**
     * @deprecated Use `focused` instead.
     */
    isFocused: boolean;
    /**
     * @deprecated Use `vertical` instead.
     */
    isVertical: boolean;
    reset: () => void;
    stepDown: (step?: number) => void;
    stepTo: (value: number) => void;
    stepUp: (step?: number) => void;
    value: number;
    vertical: boolean;
    getContainerProps: PropGetter<"div", undefined>;
    getFilledTrackProps: PropGetter<"div", undefined>;
    getInputProps: PropGetter<"input", undefined>;
    getMarkProps: RequiredPropGetter<{
        value: number;
    } & HTMLProps, HTMLProps>;
    getThumbProps: PropGetter<"div", undefined>;
    getTrackProps: PropGetter<"div", undefined>;
};
type ReturnUseSlider = ReturnType<typeof useSlider>;
interface SliderOptions {
    /**
     * The CSS `color` property. Used in `color` of filled track element.
     */
    filledTrackColor?: CSSUIProps["color"];
    /**
     * The CSS `background` property. Used in `background` of thumb element.
     */
    thumbColor?: CSSUIProps["bg"];
    /**
     * The CSS `box-size` property. Used in `box-size` of thumb element.
     */
    thumbSize?: CSSUIProps["boxSize"];
    /**
     * The CSS `color` property. Used in `color` of track element.
     */
    trackColor?: CSSUIProps["color"];
    /**
     * The CSS `height` property. Used in `height` of track element.
     */
    trackSize?: CSSUIProps["h"];
    /**
     * Props for slider filled track element.
     */
    filledTrackProps?: SliderFilledTrackProps;
    /**
     * Props for slider input element.
     */
    inputProps?: HTMLUIProps<"input">;
    /**
     * Props for slider thumb element.
     */
    thumbProps?: SliderThumbProps;
    /**
     * Props for slider track element.
     */
    trackProps?: SliderTrackProps;
}
interface SliderProps extends ThemeProps<"Slider">, UseSliderProps, SliderOptions {
}
/**
 * `Slider` is a component used for allowing users to select a value from a range.
 *
 * @see Docs https://yamada-ui.com/components/forms/slider
 */
declare const Slider: _yamada_ui_core.Component<"input", SliderProps>;
interface SliderTrackProps extends HTMLUIProps, Pick<SliderOptions, "filledTrackProps"> {
}
declare const SliderTrack: _yamada_ui_core.Component<"div", SliderTrackProps>;
interface SliderFilledTrackProps extends HTMLUIProps {
}
declare const SliderFilledTrack: _yamada_ui_core.Component<"div", SliderFilledTrackProps>;
interface SliderMarkProps extends HTMLUIProps {
    value: number;
}
declare const SliderMark: _yamada_ui_core.Component<"div", SliderMarkProps>;
interface SliderThumbProps extends HTMLUIProps {
}
declare const SliderThumb: _yamada_ui_core.Component<"div", SliderThumbProps>;

export { type ReturnUseSlider, Slider, SliderFilledTrack, type SliderFilledTrackProps, SliderMark, type SliderMarkProps, type SliderProps, SliderThumb, type SliderThumbProps, SliderTrack, type SliderTrackProps, type UseSliderOptions, type UseSliderProps, getThumbSize, useSlider };