import React from 'react';
/** One value, or a `[low, high]` pair for a range. */
export type SliderValue = number | readonly [number, number];
/** Widens a literal: a `defaultValue={20}` slider reports `number`, not `20`. */
type Widen<V extends SliderValue> = V extends number ? number : readonly [number, number];
export interface SliderProps<V extends SliderValue = number> {
    /** Visible label. Names the group, and every thumb through it. */
    label?: React.ReactNode;
    /** Only when there is no visible label. */
    'aria-label'?: string;
    /** Helper text under the track, linked to every thumb. */
    description?: React.ReactNode;
    /**
     * A number for one thumb, `[low, high]` for two. The shape of `value` or
     * `defaultValue` decides which slider this is.
     */
    value?: V;
    defaultValue?: V;
    /** Fires on every step of a drag or key press. */
    onChange?: (value: Widen<V>) => void;
    /**
     * Fires once, when a drag ends or a key is released. Use this, not
     * `onChange`, for anything that fetches or saves.
     */
    onChangeEnd?: (value: Widen<V>) => void;
    /** Default 0. */
    minValue?: number;
    /** Default 100. */
    maxValue?: number;
    /** Default 1. Page Up and Page Down move by a tenth of the range. */
    step?: number;
    /**
     * How values are shown and announced — `{ style: 'percent' }`,
     * `{ style: 'unit', unit: 'second' }`, currency. In the user's locale.
     */
    formatOptions?: Intl.NumberFormatOptions;
    /**
     * A range's two thumbs, named. Each is read before the label — "Minimum
     * Duration". Pass translations here.
     */
    thumbLabels?: readonly [string, string];
    /** The current value beside the label. On by default. */
    showValue?: boolean;
    isDisabled?: boolean;
    /**
     * The form field name. A range submits two fields, so it takes a pair.
     */
    name?: V extends number ? string : readonly [string, string];
    id?: string;
    className?: string;
}
/**
 * Slider — a value, or a range, picked along a track.
 *
 * WHEN A SLIDER, AND WHEN NOT
 *
 * For a rough value in a known range, where where-it-sits matters more than
 * the exact number: a threshold, a zoom, a "between 30s and 2m" filter. When
 * the number itself matters — a price, a budget — NumberInput: dragging to
 * exactly 4,250 is a test of hand steadiness.
 *
 * HOW IT IS BUILT
 *
 *   - Each thumb is a real `<input type="range">`, visually hidden, so the
 *     platform's slider keyboard and screen-reader model come for free:
 *     arrows step, Page Up/Down jump a tenth, Home/End go to the bounds.
 *     `aria-valuetext` carries the formatted value, so "45%" is read, not
 *     "0.45".
 *   - A range's thumbs cannot cross: each one's bounds are the other's value.
 *   - Pressing the track moves the nearest thumb there.
 *   - Every thumb's hit area is 24px square — WCAG 2.5.8 — around a 20px knob,
 *     and the track is 24px tall for the same reason, around a 4px rail.
 *   - In a right-to-left locale the track runs right to left, keys included.
 */
export declare function Slider<V extends SliderValue = number>({ label, 'aria-label': ariaLabel, description, value, defaultValue, onChange, onChangeEnd, minValue, maxValue, step, formatOptions, thumbLabels, showValue, isDisabled, name, id, className, }: SliderProps<V>): React.JSX.Element;
export declare namespace Slider {
    var displayName: string;
}
export {};
//# sourceMappingURL=Slider.d.ts.map