import { EventEmitter } from '../../../stencil-public-runtime';
/**
 * Allow the user to use the slider to set a number value. Its built on the native `input[type=range]` element and
 * has support for most attributes.
 *
 * @slot helpertext - Set the helpertext via a slot instead of prop. Wrap the content like this: `<span slot="helpertext">`.
 * @slot error - Set the error message via a slot instead of prop. Wrap the content like this: `<span slot="error">`.
 *
 * @nativeInput Use the `input` event to listen to the range / input value being modified by the user. It is emitted everytime the user changes the value.
 * @nativeChange The `change` event is emitted when the user makes a final selection (letting go of the range/input).
 *
 * @since v7.20.0
 */
export declare class PnRange {
    private readonly id;
    private readonly idEnd;
    private idInput;
    private idInputEnd;
    private idInputHidden;
    private idHelpertext;
    private idError;
    private idDatalist;
    private mo?;
    private rangeTimeout;
    private readonly tooltipDefault;
    hostElement: HTMLElement;
    private showHelperSlot;
    private showErrorSlot;
    /** If true, remove transition times. */
    private isPressing?;
    /** When using `multiple`, decide which control is being pressed. */
    private pressControl?;
    /** Label for the range input. */
    label: string;
    /** Label for the range end input. */
    labelEnd: string;
    /** Set a helpertext for the range input. */
    helpertext?: string;
    /**
     * Add markers. This will also render a `datalist` element with `options`.
     * Omitting the `label` for a marker will use the `value` as label instead.
     * Set `label` to `null` or `''` to hide it completely.
     */
    markers?: {
        value: number;
        label?: string;
    }[];
    /** Set a prefix for the range/input field. */
    textPrefix?: string;
    /** Set a suffix for the range/input field. */
    textSuffix?: string;
    /** Set an icon for the range/input field. */
    icon?: string;
    /** Set an icon at the end of the range or for the second input field when using `multiple`. */
    iconEnd?: string;
    /** Set a custom HTML id. */
    pnId?: string;
    /** Set a custom HTML id. */
    pnIdEnd?: string;
    /** The range input name. @category HTML Attributes */
    name?: string;
    /** The range input name. @category HTML Attributes */
    nameEnd?: string;
    /** The range input min value. @category HTML Attributes */
    min?: number;
    /** The range input max value. @category HTML Attributes */
    max?: number;
    /** The range input value. @category HTML Attributes */
    value?: number;
    /** The range end input value. @category HTML Attributes */
    valueEnd?: number;
    /** Set a step value for the range input. @category HTML Attributes */
    step?: HTMLInputElement['step'];
    /**
     * Allow multiple values to be selected
     * @category Features
     */
    multiple?: boolean;
    /**
     * Display an input for the range value.
     * Allowing the user to type or use the slider to set the value.
     * @category Features
     */
    input?: boolean;
    /** Hide the tooltip. @category Features */
    tooltipHide?: boolean;
    /**
     * Range tooltip label template. Default is simply the value of the range input.
     * @example
     * // Show a suffixed '%' in the tooltip with '{value} %'.
     * <pn-range tooltip-template="{value} %" value="25" />
     * @category Features
     */
    tooltipTemplate?: string;
    /** Disable the range input. @category State */
    disabled?: boolean;
    /** Set an error message for the range input. @category State */
    error?: string;
    /** Set the error visual for the range input, same as `error`, but without a message. @category State */
    invalid?: boolean;
    handleValue(): void;
    handleValueEnd(): void;
    handleId(): void;
    handleMessage(): void;
    handleMultiple(): void;
    /** Emitted as the user makes any changes to the range/input value. */
    rangeSelected: EventEmitter<{
        value: number;
        valueEnd?: number;
        percentage: number;
        difference?: number;
    }>;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private tooltipDirection;
    private isActiveMarker;
    private hasHelperText;
    /** If any `error` text is present, either via prop/slot. */
    private hasErrorMessage;
    /** If any `error` is active, either via the prop `invalid` or `error` prop/slot. */
    private hasError;
    private checkSlottedHelper;
    private checkSlottedError;
    private calcPercentage;
    private setValue;
    private getTooltipLabel;
    private getMarkerLabel;
    private ariaDescribedby;
    private handleChange;
    private setListeners;
    private handlePress;
    private handleRelease;
    private commonAttrs;
    private renderPrefix;
    private renderSuffix;
    private renderNumberInput;
    private renderRangeInput;
    private renderTooltip;
    private handleOverlayInput;
    render(): any;
}
