@hakit/components
Version:
A series of components to work with @hakit/core
44 lines • 2.13 kB
TypeScript
type ActiveSlider = "low" | "high" | "value";
export type ControlCircularSliderMode = "start" | "end" | "full";
export interface ControlSliderCircularProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange"> {
/** the value of the slider */
value?: number;
/** the low end value if low/high values are supported */
low?: number;
/** the high end value if low/high values are supported */
high?: number;
/** should the slider become disabled @default false */
disabled?: boolean;
/** should the slider become readonly @default false */
readonly?: boolean;
/** should the slider support dual values @default false */
dual?: boolean;
/** the mode of the slider */
mode?: ControlCircularSliderMode;
/** should the slider become inactive @default false */
inactive?: boolean;
/** the label of the slider used for screen readers */
label?: string;
/** the current value of the slider which places a dot on the slider */
current?: number;
/** the step of the slider @default 1 */
step?: number;
/** the minimum value of the slider @default 0 */
min?: number;
/** the maximum value of the slider @default 100 */
max?: number;
/** the colors of the slider, if single value, just use color, else use high and low color */
colors?: {
color?: string;
lowColor?: string;
highColor?: string;
};
/** called whenever the value changes, you should not use this to update state but rather display the value visually using refs for example, updates are throttled to 20ms */
onChange?: (value: number, type: ActiveSlider) => void;
/** called whenever the value changes and the user has finished interacting with the slider */
onChangeApplied?: (value: number, type: ActiveSlider) => void;
}
/** A interactive slider similar to the home assistant circular slider to control climate & humidifier entities */
export declare function ControlSliderCircular(props: ControlSliderCircularProps): import("@emotion/react/jsx-runtime").JSX.Element;
export {};
//# sourceMappingURL=index.d.ts.map