@ui5/webcomponents-react/dist/webComponents/Slider/index.d.ts

React Wrapper for UI5 Web Components and additional components

import '@ui5/webcomponents/dist/Slider.js';
import type { Tickmark } from '@ui5/webcomponents/dist/SliderScale.js';
import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base';
interface SliderAttributes {
    /**
     * Defines the accessible ARIA name of the component.
     *
     * **Note:** Available since [v1.4.0](https://github.com/UI5/webcomponents/releases/tag/v1.4.0) of **@ui5/webcomponents**.
     * @default undefined
     */
    accessibleName?: string | undefined;
    /**
     * Defines whether the slider is in disabled state.
     * @default false
     */
    disabled?: boolean;
    /**
     *
     * Indicates whether input fields should be used as tooltips for the handles.
     *
     * **Note:** Setting this option to true will only work if showTooltip is set to true.
     * **Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.
     * @default false
     */
    editableTooltip?: boolean;
    /**
     * Displays a label with a value on every N-th step.
     *
     * **Note:** The step and tickmarks properties must be enabled.
     * Example - if the step value is set to 2 and the label interval is also specified to 2 - then every second
     * tickmark will be labelled, which means every 4th value number.
     *
     * **Note:** This property is ignored when the `tickmarks` property is used.
     * In that case every custom tickmark is labelled with its own `label`.
     * @default 0
     */
    labelInterval?: number;
    /**
     * Defines the maximum value of the slider.
     * @default 100
     */
    max?: number;
    /**
     * Defines the minimum value of the slider.
     * @default 0
     */
    min?: number;
    /**
     * Determines the name by which the component will be identified upon submission in an HTML form.
     *
     * **Note:** This property is only applicable within the context of an HTML Form element.
     *
     * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**.
     * @default undefined
     */
    name?: string | undefined;
    /**
     * Enables tickmarks visualization for each step.
     *
     * **Note:** The step must be a positive number.
     * @default false
     */
    showTickmarks?: boolean;
    /**
     * Enables handle tooltip displaying the current value.
     * @default false
     */
    showTooltip?: boolean;
    /**
     * Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).
     *
     * **Note:** If set to 0 the slider handle movement is disabled.
     * @default 1
     */
    step?: number;
    /**
     * Defines custom tickmarks with labels on the slider scale.
     * Each tickmark object has a numeric `value` and an optional `label` string.
     * Tickmarks are purely visual — they display labeled markers at specific positions
     * but do not affect the slider's movement behavior. The slider still moves
     * according to `min`, `max`, and `step`.
     *
     * When the current value matches a tickmark value, the tickmark's label
     * is shown in the tooltip and announced via `aria-valuetext`.
     *
     * **Note:** When `tickmarks` is provided, the scale is automatically shown
     * (equivalent to `showTickmarks`), and `labelInterval` is ignored - every
     * custom tickmark is rendered with its own `label`.
     *
     * **Note:** Available since [v2.23.0](https://github.com/UI5/webcomponents/releases/tag/v2.23.0) of **@ui5/webcomponents**.
     * @default []
     */
    tickmarks?: Array<Tickmark> | keyof typeof Array<Tickmark>;
    /**
     * Current value of the slider
     * @default 0
     */
    value?: number;
}
interface SliderDomRef extends Required<SliderAttributes>, Ui5DomRef {
}
interface SliderPropTypes extends SliderAttributes, Omit<CommonProps, keyof SliderAttributes | 'onChange' | 'onInput'> {
    /**
     * Fired when the value changes and the user has finished interacting with the slider.
     *
     * | cancelable | bubbles |
     * | :--------: | :-----: |
     * | ❌|✅|
     */
    onChange?: (event: Ui5CustomEvent<SliderDomRef>) => void;
    /**
     * Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.
     *
     * | cancelable | bubbles |
     * | :--------: | :-----: |
     * | ❌|✅|
     */
    onInput?: (event: Ui5CustomEvent<SliderDomRef>) => void;
}
/**
 * The Slider component represents a numerical range and a handle (grip).
 * The purpose of the component is to enable visual selection of a value in
 * a continuous numerical range by moving an adjustable handle.
 *
 * ### Structure
 * The most important properties of the Slider are:
 *
 * - min - The minimum value of the slider range.
 * - max - The maximum value of the slider range.
 * - value - The current value of the slider range.
 * - step - Determines the increments in which the slider will move.
 * - showTooltip - Determines if a tooltip should be displayed above the handle.
 * - showTickmarks - Displays a visual divider between the step values.
 * - labelInterval - Labels some or all of the tickmarks with their values.
 *
 * ### Usage
 * The most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).
 *
 * ### Responsive Behavior
 * The `Slider` component adjusts to the size of its parent container by recalculating and
 * resizing the width of the control. You can move the slider handle in several different ways:
 *
 * - Drag and drop the handle to the desired value.
 * - Click/tap on the range bar to move the handle to that location.
 *
 * ### Keyboard Handling
 *
 * - `Left or Down Arrow` - Moves the handle one step to the left, effectively decreasing the component's value by `step` amount;
 * - `Right or Up Arrow` - Moves the handle one step to the right, effectively increasing the component's value by `step` amount;
 * - `Left or Down Arrow + Ctrl/Cmd` - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;
 * - `Right or Up Arrow + Ctrl/Cmd` - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;
 * - `Plus` - Same as `Right or Up Arrow`;
 * - `Minus` - Same as `Left or Down Arrow`;
 * - `Home` - Moves the handle to the beginning of the range;
 * - `End` - Moves the handle to the end of the range;
 * - `Page Up` - Same as `Right or Up + Ctrl/Cmd`;
 * - `Page Down` - Same as `Left or Down + Ctrl/Cmd`;
 * - `Escape` - Resets the value property after interaction, to the position prior the component's focusing;
 *
 *
 *
 * __Note:__ This is a UI5 Web Component! [Slider UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/Slider) | [Repository](https://github.com/UI5/webcomponents)
 */
declare const Slider: import("react").ForwardRefExoticComponent<SliderPropTypes & import("@ui5/webcomponents-react-base").WithWebComponentPropTypes & import("react").RefAttributes<SliderDomRef>>;
export { Slider };
export type { SliderDomRef, SliderPropTypes };