import * as _angular_core from '@angular/core'; import { AfterViewInit, OnDestroy, OnInit, ElementRef, QueryList } from '@angular/core'; import { ControlValueAccessor, ValidatorFn } from '@angular/forms'; import { Point, CdkDragMove, CdkDragEnd } from '@angular/cdk/drag-drop'; import * as i1 from '@eui/components/shared'; /** * Represents the value structure for the slider component. * Contains start value and optional end value for range selection. */ interface IEuiSliderValues { /** The starting value of the slider or the single value in non-range mode */ start: number; /** The ending value of the slider when in range mode, null otherwise */ end?: number | null; } type SliderHandler = 'start' | 'end'; /** * A draggable slider component for selecting numeric values within a defined range. * Supports both single-value and range selection modes with keyboard navigation, * visual feedback through tooltips and ticks, and full accessibility support. * Implements ControlValueAccessor for seamless integration with Angular forms. * * Use cases: * - Single value selection within a numeric range * - Range selection with start and end values * - Form-integrated numeric input with visual feedback * - Accessible numeric input for keyboard and screen reader users * * @usageNotes * ### Basic Usage * ```html * * * * * * * * * ``` * * ```typescript * sliderValue = { start: 50, end: null }; * rangeValue = { start: 200, end: 800 }; * formatPrice = (value: number) => `$${value}`; * ``` * * ### Accessibility * - Keyboard navigation: Arrow keys to adjust, Home/End for min/max * - Provide descriptive ariaLabel for the slider purpose * - Use endAriaLabel for range sliders to distinguish handles * - Focus indicators show which handle is active * * ### Notes * - Value structure: { start: number, end?: number | null } * - Range mode requires hasRange="true" and both start/end values * - Ticks display at each step interval when hasTicks="true" * - Tooltip shows current value on hover when hasTooltip="true" */ declare class EuiSliderComponent implements ControlValueAccessor, AfterViewInit, OnDestroy, OnInit { /** * @description * Computes and returns the CSS classes for the component based on its current state. * * @returns {string} Space-separated string of CSS class names */ get cssClasses(): string; /** * Initial value used by the slider. * @defaultValue { start: 0, end: 0 } */ value: _angular_core.ModelSignal; /** * The lowest value in the range of permitted values. * * @default 0 */ minValue: _angular_core.InputSignalWithTransform; /** * The greatest value in the range of permitted values. * * @default 100 */ maxValue: _angular_core.InputSignalWithTransform; /** * Number that specifies the granularity that the value must adhere to. * * @default 1 */ step: _angular_core.InputSignalWithTransform; /** * Wheter a tooltip should be displayed when the handlers are hovered. * * @default true */ hasTooltip: _angular_core.InputSignalWithTransform; /** * Wheter a ticks should be displayed at each step interval. * * @default false */ hasTicks: _angular_core.InputSignalWithTransform; /** * Wheter the value should be displayed on the top right of the track. * * @default true */ hasValueIndicator: _angular_core.InputSignalWithTransform; /** * Wheter a second should be display to allow to select a range. * * @default false */ hasRange: _angular_core.InputSignalWithTransform; /** * Method that allows to format the value display. * * @return The formatted string * @defaultValue (value: number) => `${value}` */ formatValue: _angular_core.InputSignal<(value: number) => string>; /** * @description * The label for the slider, used for accessibility. * @default 'eUI slider'. */ ariaLabel: _angular_core.InputSignal; /** * @description * The label for the end slider in case there is a range, used for accessibility. * @default 'end eUI slider'. */ endAriaLabel: _angular_core.InputSignal; /** * @description * The unique identifier for the slider. * This is used for accessibility and to link the slider with its label. * @default 'eui-slider-' + uniqueId() */ sliderId: _angular_core.InputSignal; sliderContainer: ElementRef; trackActive: ElementRef; startHandler: ElementRef; startHandlerContainer: ElementRef; endHandler: ElementRef; endHandlerContainer: ElementRef; handlers: QueryList; startInputRange: ElementRef; endInputRange: ElementRef; inputRanges: QueryList; isDisabled: boolean; initValue: { start: Point; end: Point; }; ticks: { value: number; position: string; }[]; private baseStatesDirective; private control; private cd; private destroy$; private keyboardSubscription; private resizeObserver; /** * Position where the user clicked to start the drag of an handler */ private dragOffsetX; constructor(); ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; get formattedStartValue(): string; get formattedEndValue(): string; /** * Drag handler * * @param handlerId Dragged handler * @param e Event */ onDragMoved(handlerId: SliderHandler, e: CdkDragMove): void; /** * Drag end handler * * @param e */ onDragEnded(e: CdkDragEnd): void; writeValue(value: IEuiSliderValues): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; setDisabledState(isDisabled: boolean): void; /** * Constrains the position of a handler to the position of the other one. * Start handler cannot go after end handler. End handler cannot go before start handler. * * @param handlerId Dragged handler * @returns A function constraining the position. */ constrainPosition: (handlerId: SliderHandler) => ((point: Point) => Point); /** * Click on track handler * * @param e Click event */ onTrackClick(e: MouseEvent): void; /** * Calculates the positon of an handler for a given value. * * @param handlerId Handler to position * @param value Value on which calculate the position */ private setPositionValue; /** * Calculate the size of the active track between two handlers */ private calculateActiveTrack; /** * Generates the ticks based on the step option. */ private generateTicks; private onChange; private onTouched; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * @description * Validator that requires the min / max of start and / or end values. * * @usageNotes * ```typescript * const slider = new FormControl({ start: 10, end: 50 }, [sliderValidator({ startMin: 5, startMax: 50, endMin: 30, endMax: 90 })]), * console.log(slider.errors); // null * * const slider = new FormControl({ start: 0, end: 50 }, [sliderValidator({ startMin: 5, startMax: 50, endMin: 30, endMax: 90 })]), * console.log(slider.errors); // { startMin: { required: 5, actual: 0 } } * * const slider = new FormControl({ start: 60, end: 80 }, [sliderValidator({ startMin: 5, startMax: 50, endMin: 30, endMax: 90 })]), * console.log(slider.errors); // { startMax: { required: 50, actual: 60 } } * * const slider = new FormControl({ start: 10, end: 20 }, [sliderValidator({ startMin: 5, startMax: 50, endMin: 30, endMax: 90 })]), * console.log(slider.errors); // { endMin: { required: 30, actual: 20 } } * * const slider = new FormControl({ start: 10, end: 100 }, [sliderValidator({ startMin: 5, startMax: 50, endMin: 30, endMax: 90 })]), * console.log(slider.errors); // { endMax: { required: 90, actual: 100 } } * ``` * * @returns A validator function that returns an error map with `startMin` / `startMax` / `endMin` / `endMax` if the validation check fails, otherwise `null`. */ declare function sliderValidator(config: { startMin?: number; startMax?: number; endMin?: number; endMax?: number; }): ValidatorFn; declare const EUI_SLIDER: readonly [typeof EuiSliderComponent]; export { EUI_SLIDER, EuiSliderComponent, sliderValidator }; export type { IEuiSliderValues }; //# sourceMappingURL=eui-components-eui-slider.d.ts.map