@carbon/react/es/components/Slider/Slider.d.ts

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { type InputHTMLAttributes, type KeyboardEventHandler, type ReactNode } from 'react';
import type { TranslateWithId } from '../../types/common';
declare const translationIds: {
    readonly 'carbon.slider.auto-correct-announcement': "carbon.slider.auto-correct-announcement";
};
type TranslationKey = keyof typeof translationIds;
type TranslationArgs = {
    correctedValue?: string;
};
declare enum HandlePosition {
    LOWER = "lower",
    UPPER = "upper"
}
type ExcludedAttributes = 'onChange' | 'onBlur';
export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey, TranslationArgs> {
    /**
     * The `ariaLabel` for the `<input>`.
     */
    ariaLabelInput?: string;
    /**
     * The `ariaLabel` for the upper bound `<input>` and handle when there are two handles.
     */
    unstable_ariaLabelInputUpper?: string;
    /**
     * The child nodes.
     */
    children?: ReactNode;
    /**
     * The CSS class name for the slider, set on the wrapping div.
     */
    className?: string;
    /**
     * `true` to disable this slider.
     */
    disabled?: boolean;
    /**
     * The callback to format the label associated with the minimum/maximum value and the value tooltip when hideTextInput is true.
     */
    formatLabel?: (value: number, label: string | undefined) => string;
    /**
     * `true` to hide the number input box.
     */
    hideTextInput?: boolean;
    /**
     * The ID of the `<input>`.
     */
    id?: string;
    /**
     * The `type` attribute of the `<input>`.
     */
    inputType?: string;
    /**
     * `Specify whether the Slider is currently invalid
     */
    invalid?: boolean;
    /**
     * Provide the text that is displayed when the Slider is in an invalid state
     */
    invalidText?: ReactNode;
    /**
     * The label for the slider.
     */
    labelText?: ReactNode;
    /**
     * Specify whether you want the underlying label to be visually hidden
     */
    hideLabel?: boolean;
    /**
     * @deprecated
     * `true` to use the light version.
     */
    light?: boolean;
    /**
     * The maximum value.
     */
    max: number;
    /**
     * The label associated with the maximum value.
     */
    maxLabel?: string;
    /**
     * The minimum value.
     */
    min: number;
    /**
     * The label associated with the minimum value.
     */
    minLabel?: string;
    /**
     * The `name` attribute of the `<input>`.
     */
    name?: string;
    /**
     * The `name` attribute of the upper bound `<input>` when there are two handles.
     */
    unstable_nameUpper?: string;
    /**
     * Provide an optional function to be called when the input element
     * loses focus
     */
    onBlur?: (data: {
        value: string;
        handlePosition: HandlePosition | undefined;
    }) => void;
    /**
     * The callback to get notified of change in value.
     */
    onChange?: (data: {
        value: SliderProps['value'];
        valueUpper: SliderProps['unstable_valueUpper'];
    }) => void;
    /**
     * Provide an optional function to be called when a key is pressed in the number input.
     */
    onInputKeyUp?: KeyboardEventHandler<HTMLInputElement>;
    /**
     * The callback to get notified of value on handle release.
     */
    onRelease?: (data: {
        value: SliderProps['value'];
        valueUpper: SliderProps['unstable_valueUpper'];
    }) => void;
    /**
     * Whether the slider should be read-only
     */
    readOnly?: boolean;
    /**
     * `true` to specify if the control is required.
     */
    required?: boolean;
    /**
     * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside the `step` increment will be considered invalid.
     */
    step?: number;
    /**
     * A value determining how much the value should increase/decrease by Shift+arrow keys,
     * which will be `(max - min) / stepMultiplier`.
     */
    stepMultiplier?: number;
    /**
     * The value of the slider. When there are two handles, value is the lower
     * bound.
     */
    value: number;
    /**
     * The upper bound when there are two handles.
     */
    unstable_valueUpper?: number;
    /**
     * Specify whether the control is currently in warning state
     */
    warn?: boolean;
    /**
     * Provide the text that is displayed when the control is in warning state
     */
    warnText?: ReactNode;
}
declare const _default: (props: SliderProps) => ReactNode;
export default _default;