@wonderflow/react-components/dist/components/slider/slider.d.ts

UI components from Wonderflow's Wanda design system

import { InputHTMLAttributes } from 'react';
import { SymbolProps } from '../..';
export declare type SliderProps = InputHTMLAttributes<HTMLInputElement> & {
    /**
     * Set the minimum value of the slider. This value must be lower than `max`.
     */
    min?: number;
    /**
     * Set the maximum value of the slider. This value must be higher than `min`.
     */
    max?: number;
    /**
     * Set the step value of the slider.
     * This allows the user to select a value in increments of `step`.
     */
    step?: number;
    /**
     * Callback function to be called when the value is changed.
     * A parameter `number` is passed to get the new value.
     */
    onInput?: (value: number) => void;
    /**
     * Set the initial value of the slider.
     */
    defaultValue?: number;
    /**
     * Show or hide the values beside the slider.
     */
    showValues?: boolean;
    /**
     * Add an icon representing the minimum value.
     * This is only available when `showValues` is `false`.
     */
    iconMin?: SymbolProps['source'];
    /**
     * Add an icon representing the maximum value.
     * This is only available when `showValues` is `false`.
     */
    iconMax?: SymbolProps['source'];
    /**
     * Set the size of the slider.
     */
    dimension?: 'small' | 'regular';
    /**
     * Define the accessible label of the input. While this is not
     * mandatory, an input should always have a label. If not using this property
     * you can bind a custom label to the input by using an id.
     */
    label?: string;
};
export declare const Slider: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
    /**
     * Set the minimum value of the slider. This value must be lower than `max`.
     */
    min?: number | undefined;
    /**
     * Set the maximum value of the slider. This value must be higher than `min`.
     */
    max?: number | undefined;
    /**
     * Set the step value of the slider.
     * This allows the user to select a value in increments of `step`.
     */
    step?: number | undefined;
    /**
     * Callback function to be called when the value is changed.
     * A parameter `number` is passed to get the new value.
     */
    onInput?: ((value: number) => void) | undefined;
    /**
     * Set the initial value of the slider.
     */
    defaultValue?: number | undefined;
    /**
     * Show or hide the values beside the slider.
     */
    showValues?: boolean | undefined;
    /**
     * Add an icon representing the minimum value.
     * This is only available when `showValues` is `false`.
     */
    iconMin?: import("packages/symbols/dist").SymbolNames | import("react").ReactElement<HTMLOrSVGElement, string | import("react").JSXElementConstructor<any>> | undefined;
    /**
     * Add an icon representing the maximum value.
     * This is only available when `showValues` is `false`.
     */
    iconMax?: import("packages/symbols/dist").SymbolNames | import("react").ReactElement<HTMLOrSVGElement, string | import("react").JSXElementConstructor<any>> | undefined;
    /**
     * Set the size of the slider.
     */
    dimension?: "small" | "regular" | undefined;
    /**
     * Define the accessible label of the input. While this is not
     * mandatory, an input should always have a label. If not using this property
     * you can bind a custom label to the input by using an id.
     */
    label?: string | undefined;
} & import("react").RefAttributes<HTMLInputElement>>;
//# sourceMappingURL=slider.d.ts.map