import type { ComponentSize, ThemeColor } from '../../types';
/** Slider component properties */
export type OreSliderEvents = {
    change: Event;
    input: Event;
};
export type OreSliderProps = {
    /** Theme color */
    color?: ThemeColor;
    /** Disable interaction */
    disabled?: boolean;
    /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */
    error?: string;
    /** Range mode: lower bound */
    from?: number | string;
    /** Range mode a11y label for the start thumb (e.g. "$20") */
    'from-value-text'?: string;
    /** Stretch to full width of container */
    fullwidth?: boolean;
    /** Helper text displayed below the slider (fallback when the `helper` slot is empty) */
    helper?: string;
    /** Maximum value */
    max?: number | string;
    /** Minimum value */
    min?: number | string;
    /** Single-value mode: form field name */
    name?: string;
    /** Activate two-thumb range selection */
    range?: boolean;
    /** Component size */
    size?: ComponentSize;
    /** Step increment */
    step?: number | string;
    /** Range mode: upper bound */
    to?: number | string;
    /** Range mode a11y label for the end thumb (e.g. "$80") */
    'to-value-text'?: string;
    /** Single-value mode: current value */
    value?: number | string;
    /** Single-value mode a11y label override (e.g. "75%"). Overrides raw aria-valuenow. */
    'value-text'?: string;
};
/**
 * A slider for selecting a single numeric value or a numeric range.
 *
 * Add the boolean `range` attribute to activate two-thumb range mode.
 *
 * @element ore-slider
 *
 * @attr {number}  min   - Minimum value (default: 0)
 * @attr {number}  max   - Maximum value (default: 100)
 * @attr {number}  step  - Step increment (default: 1)
 * @attr {number}  value - Current value (single mode)
 * @attr {number}  from  - Lower bound (range mode)
 * @attr {number}  to    - Upper bound (range mode)
 * @attr {boolean} range - Activate range mode
 * @attr {boolean} disabled - Disable interaction
 * @attr {string}  name  - Form field name (single mode)
 * @attr {string}  color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
 * @attr {string}  size  - 'sm' | 'md' | 'lg'
 * @attr {string}  helper - Helper text below the slider
 * @attr {string}  error  - Error message below the slider
 * @attr {boolean} fullwidth - Stretch to full width of container
 *
 * @fires input - Emitted when the slider value changes.
 * @fires change - Emitted when the slider value changes.
 *
 * @slot - Slider label text
 *
 * @part slider      - Slider container
 * @part track       - Track element
 * @part fill        - Fill element
 * @part thumb       - Single-value thumb
 * @part thumb-start - Range start thumb
 * @part thumb-end   - Range end thumb
 * @part label       - Label element
 * @part helper-text - The helper/error text element
 *
 * @cssprop --slider-height    - Track height
 * @cssprop --slider-size      - Thumb dimensions
 * @cssprop --slider-track-bg  - Track background color
 * @cssprop --slider-fill      - Active fill color
 * @cssprop --slider-thumb-bg  - Thumb background color
 *
 * @example
 * ```html
 * <ore-slider value="50" name="volume">Volume</ore-slider>
 * <ore-slider range from="20" to="80" color="primary">Price range</ore-slider>
 * ```
 */
export declare const SLIDER_TAG: "ore-slider";
//# sourceMappingURL=slider.d.ts.map