@stihl-design-system/components/components/Slider/Slider.d.ts

Welcome to the STIHL Design System react component library.

import { InputHTMLAttributes } from 'react';
import { BreakpointCustomizable } from '../../types';
import { InputSize } from '../Input/Input.utils';
export interface SliderProps extends InputHTMLAttributes<HTMLInputElement> {
    /** Unique id for the Slider. */
    id: string;
    /** Label text displayed above the Slider. */
    label: string;
    /** Disables the Slider, preventing user interaction.
     * @default false
     */
    disabled?: boolean;
    /** Hides the Slider label, can be responsive.
     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
     * @default false
     */
    hideLabel?: BreakpointCustomizable<boolean>;
    /** Controls the visibility of an additional number input for granular value control.
     * Cannot be used if step > 1 is set.
     * @default false
     */
    hideNumberInput?: boolean;
    /** Short descriptive text displayed beneath the label. */
    hint?: string;
    /**  Controls if the tooltip is visible outside of interactions. Only usable when `hideNumberInput={true}`.
     * @default false
     */
    isTooltipAlwaysVisible?: boolean;
    /**
     * Sets the maximum value
     * @default 100
     */
    max?: number | string;
    /**
     * Sets greatest value in the range of permitted values.
     * @default 0
     */
    min?: number | string;
    /**
     * Specifies the granularity that the value must adhere to.
     * @default 1
     */
    step?: number | string;
    /** Number input props:
     * `suffix`:  Text displayed as a suffix inside the input, maximum 5 characters.
     *
     * `size`:  Size of the input.
     *  (default): `'medium'`
     */
    numberInputProps?: {
        suffix?: string;
        size?: InputSize;
    };
    /** Shows an info button next to the label that triggers a popover with the passed content. */
    popoverContent?: React.ReactNode;
    /** Popover info button props:
     *
     * `data-*`: Custom data attributes.
     *
     * `label`: Accessibility label for the default anchor button.
     * (default) 'Toggle popover'
     */
    popoverInfoButtonProps?: {
        [key: `data-${string}`]: string | undefined;
        label?: string;
    };
}
/**
 * The `<DSSlider />` component is a flexible range input that allows users to select a value within a defined range.
 * It supports various customizations, including a label, hint, tooltip and an optional number input for precise value selection.
 *
 * The component also features configurable step values and min/max limits for better user guidance.
 *
 * Design in Figma: [Input Slider](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=29536-27468&t=31EIQag1wrGVM75J-4)
 */
export declare const DSSlider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLInputElement>>;