import { IChangedEventDetail, IEventEmitter } from '@breadstone/mosaik-elements'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { IMultiRangeBaseElementProps } from './IMultiRangeBaseElementProps'; declare const MultiRangeBaseElement_base: import("../../../../Index").ControlBehaviorReturn, import("../../../Behaviors/Rangeable").IRangeableProps>; /** * Multi Range Base - An abstract foundation for range controls supporting both single and multiple values. * * @description * The MultiRangeBaseElement serves as the abstract base class for range controls that allow * users to select either a single numeric value or multiple values (arrays) within a defined * minimum and maximum range. This element combines value management with range constraints, * providing reactive value change notifications and automatic boundary enforcement. It is * designed to be extended by concrete implementations like multi-thumb sliders, dual-value * range pickers, or interval selectors that require flexible value representation. * * @name Multi Range Base * @category Ranges * * @fires rangeValueChanged {RangeValueChangedEvent} - Fired when the value property changes, providing both old and new values * @fires changed {PropertyChangedEvent} - Fired when any property changes * @fires connected {ConnectedEvent} - Fired when the element is connected to the DOM * * @example * Extending for a dual-thumb slider: * ```typescript * class DualSliderElement extends MultiRangeBaseElement { * constructor() { * super(); * this.min = 0; * this.max = 100; * this.value = [25, 75]; // Two thumb positions * } * } * ``` * * @example * Single value mode: * ```typescript * const rangeElement = new MyMultiRangeElement(); * rangeElement.value = 50; // Single numeric value * rangeElement.min = 0; * rangeElement.max = 100; * ``` * * @example * Multiple value mode: * ```typescript * const rangeElement = new MyMultiRangeElement(); * rangeElement.value = [20, 40, 60, 80]; // Array of values * rangeElement.valueChanged.subscribe(({ oldValue, newValue }) => { * console.log('Values changed from', oldValue, 'to', newValue); * }); * ``` * * @example * Listening to value changes: * ```typescript * const slider = document.querySelector('my-multi-range'); * slider.addEventListener('rangeValueChanged', (event) => { * console.log('Previous value:', event.detail.oldValue); * console.log('New value:', event.detail.newValue); * }); * ``` * * @public * @abstract */ export declare abstract class MultiRangeBaseElement extends MultiRangeBaseElement_base implements IMultiRangeBaseElementProps { private readonly _valueChanged; private _value; /** * Constructs a new instance of the `MultiRangeBaseElement` class. * * @remarks * This constructor must be public, otherwise it doesn't work with mixins/behaivors. * * @public */ constructor(); /** * Specifies the value of the `Range`. * * @public * @attr */ get value(): number | Array; set value(value: number | Array); /** * Called when the value is changed. * Provides reference to the `IChangedEventDetail` with old and new value as event argument. * * @public * @eventProperty * @readonly */ get valueChanged(): IEventEmitter>>; /** * This method is invoked when the Value property changes. * * @protected */ protected onValueChanged(prev: number | Array, next: number | Array): void; } export {}; //# sourceMappingURL=MultiRangeBaseElement.d.ts.map