@progress/kendo-themes-html/dist/types/slider/slider.spec.d.ts

A collection of HTML helpers used for developing Kendo UI themes

import { KendoComponent } from '../_types/component';
declare const states: ("active" | "focus" | "disabled" | "readonly" | "hover")[];
export type KendoSliderProps = {
    type?: 'single' | 'range' | 'gradient';
    orientation?: 'horizontal' | 'vertical';
    /** For gradient sliders in 2D canvas pickers - direction cannot be determined */
    gradientType?: '1d' | '2d';
    dir?: 'ltr' | 'rtl';
    handlePosition?: 'start' | 'end';
    trackStyle?: React.CSSProperties;
    showButtons?: boolean;
    showTicks?: boolean;
    value?: number;
    min?: number;
    max?: number;
    /** For range slider - the start value */
    startValue?: number;
    /** For range slider - the end value */
    endValue?: number;
};
export type KendoSliderState = {
    [K in (typeof states)[number]]?: boolean;
};
/**
 * Slider component - range input with drag handle(s).
 *
 * @accessibility
 * - Drag handle uses `role="slider"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
 * - Uses `tabindex="0"` on drag handle to make it focusable (removed when disabled)
 * - Must have accessible name via `aria-label`, `aria-labelledby`, or `title` on drag handle
 * - Increase/decrease buttons have `tabindex="-1"` and `title` (auxiliary controls, excluded from tab order)
 * - Vertical sliders have `aria-orientation="vertical"`
 * - Gradient sliders in 2D color pickers use `aria-orientation="undefined"` (direction indeterminate)
 * - Uses `aria-disabled="true"` on drag handle when disabled
 * - Uses `aria-readonly="true"` on drag handle when readonly
 *
 * @example
 * ```tsx
 * // Basic slider
 * <Slider value={50} min={0} max={100} aria-label="Volume" />
 *
 * // Vertical slider
 * <Slider orientation="vertical" value={75} aria-label="Brightness" />
 *
 * // 2D gradient slider (color picker canvas)
 * <Slider type="gradient" gradientType="2d" aria-label="Color selector" />
 * ```
 *
 * @wcag 4.1.2 Name, Role, Value - slider must have accessible name and value
 */
export declare const Slider: KendoComponent<KendoSliderProps & KendoSliderState & React.HTMLAttributes<HTMLDivElement>>;
export default Slider;