import React, { type ReactElement } from "react";
import { type IconType } from "@vibe/icon";
import { type SliderColor, type SliderLabelColor, type SliderLabelPosition, type SliderSize } from "./Slider.types";
export type SliderProps = {
    /**
     * Define a string that labels the current element (Slider)
     */
    "aria-label"?: string;
    /**
     * ElementId of Node that have the text needed for labeling the current element (Slider)
     */
    "aria-labelledby"?: string;
    /**
     * Custom `class name` to be added to the component-root-node
     */
    className?: string;
    /**
     * Color Mode (primary/positive/negative) of the component (Slider)
     */
    color?: SliderColor;
    /**
     * Unique TestId - can be used as Selector for integration tests and other needs (tracking, etc)
     */
    "data-testid"?: string;
    defaultValue?: number | number[];
    /**
     * Formatter function `value => formattedValue`
     * default formatter return `${value}%`
     */
    /**
     * If set to true, Component (Slider) will be disabled
     *  - impossible to change value of component (Slider)
     *  - visual changes (opacity)
     */
    disabled?: boolean;
    /**
     * Attribute `id` to be added to the component-root-node
     */
    id?: string;
    /**
     * Max range value of the component (Slider)
     */
    max?: number;
    /**
     * Min range value of the component (Slider)
     */
    min?: number;
    /**
     * Optional onChange callback (for outer trigger or Controlled mode)
     * - required in Controlled Mode
     */
    onChange?: (value: number | number[]) => void;
    /**
     * If true switch slider to RRange mode (two Thumbs)
     */
    ranged?: boolean;
    /**
     * The granularity with which the slider can step through values.
     * (A "discrete" slider.) The min prop serves as the origin for the valid values.
     * We recommend (max - min) to be evenly divisible by the step.
     */
    step?: number;
    /**
     * Always show `value` instead of Tooltip
     */
    showValue?: boolean;
    /**
     * Position of the `value` when `showValue` is true
     */
    valueLabelPosition?: SliderLabelPosition;
    /**
     * Color of the `value` when `showValue` is true
     */
    valueLabelColor?: SliderLabelColor;
    /**
     * Size small/medium/large of the component (Slider)
     */
    size?: SliderSize;
    /**
     * Current/selected value of the range of the Component (Slider)
     *   - should be used in Controlled Mode only
     *   - in ranged mode should be an array of two numbers
     */
    value?: number | number[];
    /**
     * Function to format the value, e.g. add %. By default, returns `${value}%`
     */
    valueFormatter?: (value: number) => string;
    /**
     * Text/presentation of current/selected value
     *  - should be used in Controlled Mode only
     */
    valueText?: string;
    /**
     * Show selected from Slider range value
     */
    indicateSelection?: boolean;
    /**
     * Options for initial/start/prefix element, it can be one of:
     *  - Any Component (react component, node, text, number etc.)
     *  - Or it can be an object of options for Icons component (see Icon components props)
     *  - Or it can be an object for Label (Icon, Heading - and other components)
     *  - Or it can be Render Props Function witch are getting value and valueText
     */
    prefix?: {
        icon: IconType;
    } | string | ((value: number, valueText: string) => void) | ReactElement;
    /**
     * Options for postfix/end/finishing element. Same as prefix element.
     */
    postfix?: {
        icon: IconType;
    } | string | ((value: number, valueText: string) => void) | ReactElement;
    /**
     * Width of SelectionIndicator (i.e. TextField)
     */
    selectionIndicatorWidth?: string;
};
declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLElement>>;
export default Slider;