@react-md/form/types/slider/RangeSlider.d.ts

This package is for creating all the different form input types.

import type { HTMLAttributes } from "react";
import type { PropsWithRef } from "@react-md/utils";
import type { BaseSliderProps } from "./types";
import type { RangeSliderRequiredProps } from "./useRangeSlider";
/**
 * @remarks \@since 2.5.0
 */
export interface RangeSliderProps extends RangeSliderRequiredProps, BaseSliderProps {
    /**
     * Any additional props you'd like to pass to the track element as well as an
     * optional `ref` if you need access to the track element for some reason.
     */
    trackProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
    /**
     * Any additional props you'd like to pass to the first thumb element as well
     * as an optional `ref` if you need access to the track element for some
     * reason.
     */
    thumb1Props?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
    /**
     * A convenience prop for adding an `aria-label` to the first thumb element. An
     * accessible label **must** be provided by this prop, the `thumb1LabelledBy`
     * prop, or adding an `aria-label`/`aria-labelledby` to the `thumb1Props` for
     * a11y.
     */
    thumb1Label?: string;
    /**
     * A convenience prop for adding an `aria-labelledby` to the first thumb
     * element. An accessible label **must** be provided by this prop, the
     * `thumb1Label` prop, or adding an `aria-label`/`aria-labelledby` to the
     * `thumb1Props` for a11y.
     */
    thumb1LabelledBy?: string;
    /**
     * Any additional props you'd like to pass to the second thumb element as well
     * as an optional `ref` if you need access to the track element for some
     * reason.
     */
    thumb2Props?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
    /**
     * A convenience prop for adding an `aria-label` to the second thumb element.
     * An accessible label **must** be provided by this prop, the
     * `thumb2LabelledBy` prop, or adding an `aria-label`/`aria-labelledby` to the
     * `thumb2Props` for a11y.
     */
    thumb2Label?: string;
    /**
     * A convenience prop for adding an `aria-labelledby` to the second thumb
     * element. An accessible label **must** be provided by this prop, the
     * `thumb2Label` prop, or adding an `aria-label`/`aria-labelledby` to the
     * `thumb2Props` for a11y.
     */
    thumb2LabelledBy?: string;
}
/**
 * The `RangeSlider` component allows the user to select a min and max value from
 * a predefined range of numbers. The functionality for controlling the value of
 * this component is provided by the `useRangeSlider` hook.
 *
 * @remarks \@since 2.5.0
 */
export declare const RangeSlider: import("react").ForwardRefExoticComponent<RangeSliderProps & import("react").RefAttributes<HTMLDivElement>>;