retro-react/dist/cjs/components/slider/Slider.d.ts

A React component library for building retro-style websites

/// <reference types="react" />
import { ThemeUICSSObject } from 'theme-ui';
export interface SliderProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
    /**
     * The value of the Slider.
     *
     * @default undefined
     */
    value?: number;
    /**
     * The minimum allowed value of the Slider.
     *
     * @default 0
     */
    min?: number;
    /**
     * The maximum allowed value of the Slider.
     *
     * @default 100
     */
    max?: number;
    /**
     * The granularity the Slider can step through values.
     *
     * @default 1
     */
    step?: number;
    /**
     * Callback fired when the value changes.
     *
     * @default undefined
     *
     * @param {number} value The new value of the Slider.
     */
    onChange?: (value: number) => void;
    /**
     * If `true`, the Slider will be disabled.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * If `true`, the Slider will show a tooltip with the current value when dragging.
     *
     * @default true
     */
    showTooltip?: boolean;
    /**
     * If `true`, the Slider will show tick marks along the track.
     *
     * @default false
     */
    showTicks?: boolean;
    /**
     * Custom labels for specific values. Object with value as key and label as value.
     *
     * @default undefined
     */
    marks?: Record<number, string>;
    sx?: ThemeUICSSObject;
}
/**
 * Retro-styled slider for range value selection with authentic Windows 95/98 aesthetics.
 *
 * Features classic 3D beveled track and thumb with optional tooltip and tick marks.
 * Designed for fluid, responsive interaction while maintaining pixel-perfect retro styling.
 *
 * @example
 * // Basic volume slider
 * <Slider value={75} min={0} max={100} onChange={setVolume} />
 *
 * // Slider with custom marks and tooltip
 * <Slider
 *   value={50}
 *   showTicks
 *   marks={{ 0: 'Min', 50: 'Mid', 100: 'Max' }}
 *   showTooltip
 * />
 *
 * // Disabled slider
 * <Slider value={25} disabled />
 */
export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;