import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
import { RangeChangeEventDetail, RangeValue } from './range-interface';
import type { StyleEventDetail } from '../../types/shared';
/**
 * Ranges allow the user to select a value within a given range using a slider.
 *
 * @version 1.0.0
 * @status stable
 *
 * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
 * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.
 */
export declare class Range implements ComponentInterface {
    private noUpdate;
    private rect;
    private hasFocus;
    private rangeSlider?;
    private gesture?;
    el: HTMLNanoRangeElement;
    private ratioA;
    private ratioB;
    private pressedKnob;
    /**
     * How long, in milliseconds, to wait to trigger the
     * `nanoChange` event after each change in the range value.
     */
    debounce: number;
    protected debounceChanged(): void;
    /**
     * The name of the control, which is submitted with the form data.
     */
    name: string;
    /**
     * If `true`, the user must fill in a value before submitting a form.
     * By default, setting this will also add an asterisk to the label.
     */
    required: boolean;
    /**
     * Visually hide the label - but make it accessible.
     */
    hideLabel: boolean;
    private _label;
    /**
     * String to place within a label element. Alternatively you may use a label slot.
     */
    get label(): string;
    set label(value: string);
    /**
     * Show two knobs.
     */
    dualKnobs: boolean;
    /**
     * Minimum integer value of the range.
     */
    min: number;
    protected minChanged(): void;
    /**
     * Maximum integer value of the range.
     */
    max: number;
    protected maxChanged(): void;
    /**
     * If `true`, a tooltip with integer value is shown when the knob
     * is pressed.
     */
    tooltip: boolean;
    /**
     * If `true`, the knob snaps to tick marks evenly spaced based
     * on the `step` property value.
     */
    snaps: boolean;
    /**
     * Specifies the value granularity.
     */
    step: number;
    /**
     * If `true`, tick marks are displayed based on the step value.
     * Only applies when `snaps` is `true`.
     */
    ticks: boolean;
    /**
     * If `true`, the user cannot interact with the range.
     */
    disabled: boolean;
    protected disabledChanged(): void;
    /**
     * the value of the range.
     */
    value: RangeValue;
    protected valueChanged(value: RangeValue): void;
    private clampBounds;
    private ensureValueInBounds;
    /**
     * Emitted when the value property has changed.
     */
    nanoChange: EventEmitter<RangeChangeEventDetail>;
    /**
     * Emitted when the styles change.
     * @internal
     */
    nanoStyle: EventEmitter<StyleEventDetail>;
    /**
     * Emitted when the range has focus.
     */
    nanoFocus: EventEmitter<void>;
    /**
     * Emitted when the range loses focus.
     */
    nanoBlur: EventEmitter<void>;
    connectedCallback(): void;
    disconnectedCallback(): void;
    componentDidLoad(): Promise<void>;
    private handleKeyboard;
    private getValue;
    private emitStyle;
    private onStart;
    private onMove;
    private onEnd;
    private update;
    private get valA();
    private get valB();
    private get ratioLower();
    private get ratioUpper();
    private updateRatio;
    private updateValue;
    private setFocus;
    private onBlur;
    private onFocus;
    render(): any;
}
