@wordpress/components
Version:
UI components for WordPress.
57 lines • 3.14 kB
TypeScript
/// <reference types="react" />
/**
* RangeControls are used to make selections from a range of incremental values.
*
* ```jsx
* import { RangeControl } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const MyRangeControl = () => {
* const [ isChecked, setChecked ] = useState( true );
* return (
* <RangeControl
* help="Please select how transparent you would like this."
* initialPosition={50}
* label="Opacity"
* max={100}
* min={0}
* onChange={() => {}}
* />
* );
* };
* ```
*/
export declare const RangeControl: import("react").ForwardRefExoticComponent<Pick<import("../base-control/types").BaseControlProps, "help" | "hideLabelFromVision" | "__nextHasNoMarginBottom"> & import("./types").NumericProps & {
disabled?: boolean | undefined;
marks?: boolean | {
value: number;
label?: string | undefined;
}[] | undefined;
step?: number | "any" | undefined;
} & {
afterIcon?: import("../icon").IconType | undefined;
allowReset?: boolean | undefined;
beforeIcon?: import("../icon").IconType | undefined;
color?: import("csstype").Property.Color | undefined;
currentInput?: number | undefined;
icon?: string | undefined;
initialPosition?: number | undefined;
isShiftStepEnabled?: boolean | undefined;
label?: string | undefined;
onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
onChange?: ((value?: number | undefined) => void) | undefined;
onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
onMouseLeave?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
onMouseMove?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
railColor?: import("csstype").Property.Color | undefined;
renderTooltipContent?: ((value?: import("./types").ControlledRangeValue | undefined) => string | number | null | undefined) | undefined;
resetFallbackValue?: number | undefined;
separatorType?: "none" | "fullWidth" | "topFullWidth" | undefined;
shiftStep?: number | undefined;
showTooltip?: boolean | undefined;
trackColor?: import("csstype").Property.Color | undefined;
type?: "stepper" | undefined;
withInputField?: boolean | undefined;
} & Omit<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "onChange" | "color" | "help" | "icon" | "disabled" | "children" | "label" | "as" | "type" | "onFocus" | "onBlur" | "onMouseLeave" | "onMouseMove" | "step" | "showTooltip" | "hideLabelFromVision" | "__nextHasNoMarginBottom" | "isShiftStepEnabled" | "shiftStep" | "marks" | "railColor" | "trackColor" | keyof import("./types").NumericProps | "renderTooltipContent" | "afterIcon" | "allowReset" | "beforeIcon" | "currentInput" | "initialPosition" | "resetFallbackValue" | "separatorType" | "withInputField"> & import("react").RefAttributes<HTMLInputElement>>;
export default RangeControl;
//# sourceMappingURL=index.d.ts.map