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

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

import { ThemeProps } from "../../core/system/index.types.js";
import { CSSProps } from "../../core/css/index.types.js";
import { Component, GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
import "../../core/index.js";
import { SliderStyle } from "./slider.style.js";
import { UseSliderProps } from "./use-slider.js";
import "../../index.js";
import * as react2666 from "react";
import { FC, ReactElement, ReactNode } from "react";

//#region src/components/slider/slider.d.ts
interface SliderRootProps<Y extends [number, number] | number = number> extends Omit<HTMLStyledProps, "defaultValue" | "onChange" | "ref">, Omit<UseSliderProps<Y>, "orientation">, ThemeProps<SliderStyle> {
  /**
   * The fill color of the indicator.
   */
  indicatorFill?: CSSProps["color"];
  /**
   * The rounded of the indicator.
   */
  indicatorRounded?: CSSProps["rounded"];
  /**
   * The marks to display on the slider.
   */
  marks?: SliderMarksProps["marks"];
  /**
   * The fill color of the range.
   */
  rangeFill?: CSSProps["color"];
  /**
   * The fill color of the thumb.
   */
  thumbFill?: CSSProps["color"];
  /**
   * The rounded of the thumb.
   */
  thumbRounded?: CSSProps["rounded"];
  /**
   * The size of the thumb.
   */
  thumbSize?: CSSProps["boxSize"];
  /**
   * The stroke color of the thumb.
   */
  thumbStroke?: CSSProps["color"];
  /**
   * The fill color of the track.
   */
  trackFill?: CSSProps["color"];
  /**
   * The rounded of the track.
   */
  trackRounded?: CSSProps["rounded"];
  /**
   * The size of the track.
   */
  trackSize?: CSSProps["boxSize"];
  /**
   * Props for the input element.
   */
  inputProps?: SliderInputProps;
  /**
   * Props for the marks element.
   */
  marksProps?: Partial<SliderMarksProps>;
  /**
   * Props for the range element.
   */
  rangeProps?: SliderRangeProps;
  /**
   * Props for the thumb element.
   */
  thumbProps?: SliderThumbProps;
  /**
   * Props for the track element.
   */
  trackProps?: SliderTrackProps;
}
declare const SliderPropsContext: react2666.Context<Partial<SliderRootProps<number>> | undefined>, useSliderPropsContext: () => Partial<SliderRootProps<number>> | undefined;
/**
 * `Slider` is a component used for allowing users to select a value from a range.
 *
 * @see https://yamada-ui.com/docs/components/slider
 */
declare const SliderRoot: GenericsComponent<{
  <Y extends [number, number] | number = number>(props: SliderRootProps<Y>): ReactElement;
}>;
interface SliderInputProps extends HTMLStyledProps<"input"> {}
interface SliderTrackProps extends HTMLStyledProps {}
declare const SliderTrack: Component<"div", SliderTrackProps>;
interface SliderRangeProps extends HTMLStyledProps {}
declare const SliderRange: Component<"div", SliderRangeProps>;
interface SliderMarkProps extends HTMLStyledProps {
  /**
   * The value of the mark.
   */
  value: number;
  /**
   * Whether the mark is an indicator.
   *
   * @default true
   */
  indicator?: boolean;
}
declare const SliderMark: Component<"div", SliderMarkProps>;
interface SliderMarksProps extends Omit<SliderMarkProps, "value"> {
  /**
   * The marks to display on the slider.
   */
  marks: (number | {
    label: ReactNode;
    value: number;
    indicator?: boolean;
  })[];
}
declare const SliderMarks: FC<SliderMarksProps>;
interface SliderThumbProps extends HTMLStyledProps {
  /**
   * The index of the thumb.
   */
  index?: number;
}
declare const SliderThumb: Component<"div", SliderThumbProps>;
interface SliderThumbsProps extends SliderThumbProps {}
declare const SliderThumbs: FC<SliderThumbsProps>;
//#endregion
export { SliderMark, SliderMarkProps, SliderMarks, SliderMarksProps, SliderPropsContext, SliderRange, SliderRangeProps, SliderRoot, SliderRootProps, SliderThumb, SliderThumbProps, SliderThumbs, SliderThumbsProps, SliderTrack, SliderTrackProps, useSliderPropsContext };
//# sourceMappingURL=slider.d.ts.map