import { EventEmitter } from "../../stencil-public-runtime"; import { DuetLocale, DuetMargin, DuetTextFontWeight, DuetTheme } from "../../common-types"; import { DuetNumericInput } from "../../common/form-components"; import { ThemeableComponent } from "../../common/themeable-component"; export type DuetRangeChangeEvent = { originalEvent?: Event; component: "duet-range-slider"; value: number; }; export declare class DuetRangeSlider implements ThemeableComponent, DuetNumericInput { /** * Own Properties */ private rangeId; private proxyId; private nativeInput?; private timeoutId; /** * Reference to host HTML element. */ element: HTMLElement; /** * Theme of the input. */ theme: DuetTheme; /** * Controls the margin of the component. */ margin: DuetMargin; /** * Expands the input to fill 100% of the container width. */ expand: boolean; /** * Adds a unique identifier for the input. */ identifier: string; /** * Name of the input. */ name: string; /** * Set whether the input is required or not. Please note that this is necessary for * accessible inputs when the user is required to fill them. When using this property * you need to also set “novalidate” attribute to your form element to prevent * browser from displaying its own validation errors. */ required: boolean; /** * Makes the input component disabled. This prevents users from being able to * interact with the input, and conveys its inactive state to assistive technologies. */ disabled: boolean; /** * Indicates the id of a related component’s visually focused element. */ accessibleActiveDescendant: string; /** * Use this prop to add an aria-controls attribute. Use the attribute to * indicate the id of a component controlled by this component. */ accessibleControls: string; /** * Indicates the id of a component owned by the input. */ accessibleOwns: string; /** * Indicates the id of a component that describes the input. */ accessibleDescribedBy: string; /** * Minimum value. */ min: number; /** * Label for the range slider. */ label: string; /** * Color of the label. */ labelColor: string; /** * Font weight of the label. */ labelWeight: DuetTextFontWeight; /** * Visually hide the label, but still show it to screen readers. */ labelHidden: boolean; /** * Unit for the range slider. */ unit: string; /** * Maximum value. */ max: number; /** * Step amount. */ step: number; /** * Locale used to format the entered value. */ locale: DuetLocale; /** * Value of the input. */ value: number; /** * Set the amount of time, in milliseconds, to wait to trigger the duetChange * event after each keystroke. */ debounce: number; /** * Emitted when the value has changed. */ duetChange: EventEmitter; /** * Emitted when a keyboard input ocurred. */ duetInput: EventEmitter; /** * Component lifecycle events. */ componentWillLoad(): void; connectedCallback(): void; disconnectedCallback(): void; componentDidRender(): void; /** * Component event handling. */ private onInput; private onChange; /** * Sets focus on the specified `duet-range-slider`. Use this method instead of the global * `input.focus()`. */ setFocus(options?: FocusOptions): Promise; /** * Local methods. */ private calculatePercentage; /** * render() function * Always the last one in the class. */ render(): any; }