import React from 'react'; import PropTypes from 'prop-types'; import { ComponentProps } from '../utils/types'; /** @public */ type SliderChangeHandler = (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, data: { name?: string; value: number; }) => void; interface SliderPropsBase { /** Set this property instead of value to make value uncontrolled. */ defaultValue?: number; /** * The id of the description. When placed in a ControlGroup, this is automatically set to the * ControlGroup's help component. */ describedBy?: string; /** Determines whether or not the slider can be moved. */ disabled?: boolean; /** The label shown in the tooltip. Defaults to the value. */ displayValue?: string; /** * A React ref which is set to the DOM element when the component mounts and null when it unmounts. */ elementRef?: React.Ref; /** * Highlight the Slider as having an error. The thumb and bar background-color turn to accent negative. */ error?: boolean; /** When false, display as inline-block with the default width. */ inline?: boolean; /** * An id for the input, which may be necessary for accessibility, such as for aria * attributes. */ inputId?: string; /** * The id of the label. When placed in a ControlGroup, this is automatically set to the * ControlGroup's label. */ labelledBy?: string; /** The minimum value of the Slider input. */ min?: number; /** * The label shown to the left of the slider. Defaults to the min value. * Set to null to remove. */ minLabel?: React.ReactNode; /** The maximum value of the Slider input. */ max?: number; /** * The label shown to the right of the slider. Defaults to the max value. * Set to null to remove. */ maxLabel?: React.ReactNode; /** * The name is returned with onChange events, which can be used to identify the * control when multiple controls share an onChange callback. */ name?: string; /** Return event and data object with slider value. */ onChange?: SliderChangeHandler; /** @private. */ required?: boolean; /** The step value of the Slider input. */ step?: number; /** Determines whether or not the step marks should be shown. Defaults to show on focus. */ stepMarks?: 'focus' | 'always' | 'never'; /** * A React ref which is set to the slider thumb when the component mounts and null when it unmounts. */ thumbRef?: React.Ref; /** * The value of the slider. Setting this value makes the property controlled. * An `onChange` callback is required. */ value?: number; } interface SliderPropsBaseControlled extends SliderPropsBase { defaultValue?: never; onChange: SliderChangeHandler; value?: number; } interface SliderPropsBaseUncontrolled extends SliderPropsBase { defaultValue?: number; value?: never; } type SliderProps = ComponentProps; declare function Slider({ defaultValue, describedBy, disabled, displayValue, elementRef, error, inline, inputId, labelledBy, max, maxLabel, min, minLabel, name, onChange, required, step, stepMarks, thumbRef, value, ...otherProps }: SliderProps): React.JSX.Element; declare namespace Slider { var propTypes: { defaultValue: PropTypes.Requireable; describedBy: PropTypes.Requireable; disabled: PropTypes.Requireable; displayValue: PropTypes.Requireable; elementRef: PropTypes.Requireable; error: PropTypes.Requireable; inline: PropTypes.Requireable; inputId: PropTypes.Requireable; labelledBy: PropTypes.Requireable; max: PropTypes.Requireable; maxLabel: PropTypes.Requireable; min: PropTypes.Requireable; minLabel: PropTypes.Requireable; name: PropTypes.Requireable; onChange: PropTypes.Requireable<(...args: any[]) => any>; /** @private. */ required: PropTypes.Requireable; step: PropTypes.Requireable; stepMarks: PropTypes.Requireable; thumbRef: PropTypes.Requireable; value: PropTypes.Requireable; }; } export default Slider; export { SliderChangeHandler }; export type { SliderPropsBase, SliderPropsBaseControlled, SliderPropsBaseUncontrolled };