@wordpress/components
Version:
UI components for WordPress.
59 lines • 2.88 kB
TypeScript
/**
* 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 [ value, setValue ] = useState();
* return (
* <RangeControl
* __next40pxDefaultSize
* help="Please select how transparent you would like this."
* initialPosition={ 50 }
* label="Opacity"
* max={ 100 }
* min={ 0 }
* value={ value }
* onChange={ setValue }
* />
* );
* };
* ```
*/
export declare const RangeControl: import("react").ForwardRefExoticComponent<Pick<import("../base-control/types").BaseControlProps, "__nextHasNoMarginBottom" | "help" | "hideLabelFromVision"> & import("./types").NumericProps & {
disabled?: boolean;
marks?: boolean | {
value: number;
label?: string;
}[];
step?: number | 'any';
} & {
afterIcon?: import("..").IconType;
allowReset?: boolean;
beforeIcon?: import("..").IconType;
color?: import("react").CSSProperties['color'];
currentInput?: number;
initialPosition?: number;
isShiftStepEnabled?: boolean;
label?: string;
onBlur?: import("react").FocusEventHandler<HTMLInputElement>;
onChange?: (value?: number) => void;
onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
onMouseLeave?: import("react").MouseEventHandler<HTMLInputElement>;
onMouseMove?: import("react").MouseEventHandler<HTMLInputElement>;
railColor?: import("react").CSSProperties['color'];
renderTooltipContent?: (value?: import("./types").ControlledRangeValue) => string | number | null | undefined;
resetFallbackValue?: number;
separatorType?: 'none' | 'fullWidth' | 'topFullWidth';
shiftStep?: number;
__next40pxDefaultSize?: boolean;
showTooltip?: boolean;
trackColor?: import("react").CSSProperties['color'];
type?: 'stepper';
withInputField?: boolean;
__shouldNotWarnDeprecated36pxSize?: boolean;
} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "__next40pxDefaultSize" | "__nextHasNoMarginBottom" | "__shouldNotWarnDeprecated36pxSize" | "afterIcon" | "allowReset" | "as" | "beforeIcon" | "children" | "color" | "currentInput" | "disabled" | "help" | "hideLabelFromVision" | "initialPosition" | "isShiftStepEnabled" | "label" | "marks" | "onBlur" | "onChange" | "onFocus" | "onMouseLeave" | "onMouseMove" | "railColor" | "renderTooltipContent" | "resetFallbackValue" | "separatorType" | "shiftStep" | "showTooltip" | "step" | "trackColor" | "type" | "withInputField" | keyof import("./types").NumericProps> & import("react").RefAttributes<HTMLInputElement>>;
export default RangeControl;
//# sourceMappingURL=index.d.ts.map