import { IChangedEventDetail, IEventEmitter } from '@breadstone/mosaik-elements'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { IRangeBaseElementProps } from './IRangeBaseElementProps'; declare const RangeBaseElement_base: import("../../../../Index").ControlBehaviorReturn, import("../../../Behaviors/Rangeable").IRangeableProps>; /** * Range Base - An abstract foundation for single-value range controls with minimum and maximum constraints. * * @description * The RangeBaseElement provides the core functionality for range-based input controls that * allow users to select a single numeric value within a defined minimum and maximum boundary. * This abstract base class handles value state management, range constraint enforcement, and * reactive value change notifications. It serves as the foundation for concrete implementations * such as sliders, progress bars, rating controls, and other single-value range selectors. * The element automatically validates values against the configured range and emits events * when values change, enabling seamless integration with form systems and reactive data flows. * * @name Range Base * @category Ranges * * @fires rangeValueChanged {RangeValueChangedEvent} - Fired when the value property changes, providing both old and new numeric 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 custom slider: * ```typescript * class SliderElement extends RangeBaseElement { * constructor() { * super(); * this.min = 0; * this.max = 100; * this.value = 50; * } * } * ``` * * @example * Basic usage with value change tracking: * ```typescript * const slider = new MySliderElement(); * slider.min = 0; * slider.max = 10; * slider.value = 5; * slider.valueChanged.subscribe(({ oldValue, newValue }) => { * console.log(`Value changed from ${oldValue} to ${newValue}`); * }); * ``` * * @example * Listening to range value changes: * ```typescript * const control = document.querySelector('my-range'); * control.addEventListener('rangeValueChanged', (event) => { * const { oldValue, newValue } = event.detail; * console.log('Range adjusted:', oldValue, '→', newValue); * }); * ``` * * @example * Setting range constraints: * ```typescript * const rating = new MyRatingElement(); * rating.min = 1; * rating.max = 5; * rating.value = 3; // Default rating * ``` * * @public * @abstract */ export declare abstract class RangeBaseElement extends RangeBaseElement_base implements IRangeBaseElementProps { private readonly _rangeValueChanged; private _value; /** * Constructs a new instance of the `RangeBaseElement` class. * * @remarks * This constructor must be public, otherwise it doesn't work with mixins/behaviors. * * @public */ constructor(); /** * Specifies the value of the `Range`. * * @public * @attr */ get value(): number; set value(value: number); /** * Called when the value is changed. * Provides reference to the `IChangedEventDetail` with old and new value as event argument. * * @public * @eventProperty * @readonly */ get rangeValueChanged(): IEventEmitter>; /** * This method is invoked when the Value property changes. * * @protected */ protected onRangeValueChanged(prev: number, next: number): void; } export {}; //# sourceMappingURL=RangeBaseElement.d.ts.map