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