@yamada-ui/react/dist/types/components/slider/use-slider.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { Orientation } from "../../core/system/index.types.js";
import { HTMLProps, HTMLRefAttributes, PropGetter, RequiredPropGetter } from "../../core/components/index.types.js";
import "../../core/index.js";
import { FieldProps } from "../field/field.js";
import * as react2664 from "react";

//#region src/components/slider/use-slider.d.ts
interface UseSliderProps<Y extends [number, number] | number = number> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref">, HTMLRefAttributes<"input">, FieldProps {
  /**
   * 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 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?: Y;
  /**
   * 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, index: number) => string | undefined;
  /**
   * 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?: Orientation;
  /**
   * The step in which increments or decrements have to be made.
   *
   * @default 1
   */
  step?: number;
  /**
   * The value of the slider.
   */
  value?: Y;
  /**
   * Function called whenever the slider value changes.
   */
  onChange?: (value: Y) => void;
  /**
   * Function called when the user is done selecting a new value.
   */
  onChangeEnd?: (value: Y) => void;
  /**
   * Function called when the user starts selecting a new value.
   */
  onChangeStart?: (value: Y) => void;
}
declare const useSlider: <Y extends [number, number] | number = number>(props?: UseSliderProps<Y>) => {
  percent: Y extends number ? number : number[];
  range: boolean;
  setValue: react2664.Dispatch<react2664.SetStateAction<Y>>;
  stepDown: (index: number, step?: number) => void;
  stepUp: (index: number, step?: number) => void;
  value: Y;
  getInputProps: PropGetter<"input", {
    index?: number;
  }, undefined>;
  getMarkProps: RequiredPropGetter<"div", {
    value: number;
  }, undefined>;
  getRangeProps: PropGetter<"div", undefined, undefined>;
  getRootProps: PropGetter<"div", undefined, undefined>;
  getThumbProps: PropGetter<"div", {
    index?: number;
  }, undefined>;
  getTrackProps: PropGetter<"div", undefined, undefined>;
  onChange: (index: number, value: number) => void;
};
type UseSliderReturn = ReturnType<typeof useSlider>;
//#endregion
export { UseSliderProps, UseSliderReturn, useSlider };
//# sourceMappingURL=use-slider.d.ts.map