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

Yamada UI slider components

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

interface UseRangeSliderOptions {
    /**
     * 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, string] | string;
    /**
     * The minimum distance between slider thumbs.
     * Useful for preventing the thumbs from being too close together.
     *
     * @default 0
     */
    betweenThumbs?: number;
    /**
     * The initial value of the slider.
     */
    defaultValue?: [number, 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, number];
    /**
     * Function called whenever the slider value changes.
     */
    onChange?: (value: [number, number]) => void;
    /**
     * Function called when the user is done selecting a new value.
     */
    onChangeEnd?: (value: [number, number]) => void;
    /**
     * Function called when the user starts selecting a new value.
     */
    onChangeStart?: (value: [number, number]) => void;
}
interface UseRangeSliderProps extends Merge<HTMLUIProps, FormControlOptions & UseRangeSliderOptions> {
}
declare const useRangeSlider: ({ focusThumbOnChange, ...props }: UseRangeSliderProps) => {
    dragging: boolean;
    focused: boolean;
    getInputId: (i: number) => string;
    getMarkerId: (i: number) => string;
    getThumbId: (i: number) => string;
    reset: () => void;
    stepDown: (i: number, step?: number) => void;
    stepUp: (i: number, step?: number) => void;
    values: [number, number];
    vertical: boolean;
    getContainerProps: PropGetter<"div", undefined>;
    getFilledTrackProps: PropGetter<"div", undefined>;
    getInputProps: RequiredPropGetter<{
        index: number;
    } & HTMLProps<"input">, HTMLProps<"input">>;
    getMarkProps: RequiredPropGetter<{
        value: number;
    } & HTMLProps, HTMLProps>;
    getThumbProps: RequiredPropGetter<{
        index: number;
    } & _yamada_ui_core.UIProps & Omit<HTMLProps<"div">, keyof _yamada_ui_core.UIProps>, HTMLUIProps>;
    getTrackProps: PropGetter<"div", undefined>;
};
type ReturnUseRangeSliderProps = ReturnType<typeof useRangeSlider>;
interface RangeSliderOptions {
    /**
     * 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 range slider filled track element.
     */
    filledTrackProps?: RangeSliderFilledTrackProps;
    /**
     * Props for range slider input element.
     */
    inputProps?: HTMLUIProps<"input">;
    /**
     * Props for range slider thumb element.
     */
    thumbProps?: RangeSliderThumbProps;
    /**
     * Props for range slider track element.
     */
    trackProps?: RangeSliderTrackProps;
}
interface RangeSliderProps extends ThemeProps<"RangeSlider">, UseRangeSliderProps, RangeSliderOptions {
}
/**
 * `RangeSlider` is a component used for users to select a range of related values.
 *
 * @see Docs https://yamada-ui.com/components/forms/range-slider
 */
declare const RangeSlider: _yamada_ui_core.Component<"div", RangeSliderProps>;
interface RangeSliderTrackProps extends HTMLUIProps, Pick<RangeSliderOptions, "filledTrackProps"> {
}
declare const RangeSliderTrack: _yamada_ui_core.Component<"div", RangeSliderTrackProps>;
interface RangeSliderFilledTrackProps extends HTMLUIProps {
}
declare const RangeSliderFilledTrack: _yamada_ui_core.Component<"div", RangeSliderFilledTrackProps>;
interface RangeSliderMarkProps extends HTMLUIProps {
    value: number;
}
declare const RangeSliderMark: _yamada_ui_core.Component<"div", RangeSliderMarkProps>;
interface RangeSliderThumbProps extends HTMLUIProps {
}
declare const RangeSliderStartThumb: _yamada_ui_core.Component<"div", RangeSliderThumbProps>;
declare const RangeSliderEndThumb: _yamada_ui_core.Component<"div", RangeSliderThumbProps>;

export { RangeSlider, RangeSliderEndThumb, RangeSliderFilledTrack, type RangeSliderFilledTrackProps, RangeSliderMark, type RangeSliderMarkProps, type RangeSliderProps, RangeSliderStartThumb, type RangeSliderThumbProps, RangeSliderTrack, type RangeSliderTrackProps, type ReturnUseRangeSliderProps, type UseRangeSliderOptions, type UseRangeSliderProps, useRangeSlider };