UNPKG

1.23 kBTypeScriptView Raw
1import { PseudoBoxProps } from "../PseudoBox";
2import * as React from "react";
3import { BoxProps } from "../Box";
4import { Omit } from "../common-types";
5
6interface ISlider {
7 value?: number;
8 defaultValue?: number;
9 isDisabled?: boolean;
10 max?: number;
11 min?: number;
12 step?: number;
13 "aria-labelledby"?: React.AriaAttributes["aria-labelledby"];
14 "aria-label"?: React.AriaAttributes["aria-label"];
15 "aria-valuetext"?: React.AriaAttributes["aria-valuetext"];
16 orientation?: "horizontal" | "vertical";
17 getAriaValueText?: (value: number) => string;
18 size?: "sm" | "md" | "lg";
19 /**
20 * The color of the slider track
21 *
22 * 🚨Note: This should be one of the color keys in the theme that has `100` - `900` color values (e.g.`green`, `red`).
23 * @see http://chakra-ui.com/theme#colors
24 */
25 color?: string;
26 name?: string;
27 id?: string;
28 onChange?: (newValue: number) => void;
29 children?: React.ReactNode;
30}
31
32export const SliderThumb: React.FC<PseudoBoxProps>;
33
34export const SliderTrack: React.FC<BoxProps>;
35
36export const SliderFilledTrack: React.FC<PseudoBoxProps>;
37
38export type SliderProps = ISlider & Omit<BoxProps, "onChange" | "size">;
39
40declare const Slider: React.FC<SliderProps>;
41
42export default Slider;