import * as i0 from '@angular/core';
import { OnInit, OnDestroy, TemplateRef, EventEmitter, AfterViewInit, AfterContentInit, OnChanges, ElementRef, SimpleChanges } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { Subject } from 'rxjs';
import { EditorProvider } from 'igniteui-angular/core';
/**
* Template directive that allows you to set a custom template representing the lower label value of the {@link IgxSliderComponent}
*
* ```html
*
* {{value}}
*
* ```
*
* @context {@link IgxSliderComponent.context}
*/
declare class IgxThumbFromTemplateDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* Template directive that allows you to set a custom template representing the upper label value of the {@link IgxSliderComponent}
*
* ```html
*
* {{value}}
*
* ```
*
* @context {@link IgxSliderComponent.context}
*/
declare class IgxThumbToTemplateDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* Template directive that allows you to set a custom template, represeting primary/secondary tick labels of the {@link IgxSliderComponent}
*
* @context {@link IgxTicksComponent.context}
*/
declare class IgxTickLabelTemplateDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
interface IRangeSliderValue {
lower: number;
upper: number;
}
interface ISliderValueChangeEventArgs {
oldValue: number | IRangeSliderValue;
value: number | IRangeSliderValue;
}
declare const IgxSliderType: {
/**
* Slider with single thumb.
*/
readonly SLIDER: "slider";
/**
* Range slider with multiple thumbs, that can mark the range.
*/
readonly RANGE: "range";
};
type IgxSliderType = (typeof IgxSliderType)[keyof typeof IgxSliderType];
declare const SliderHandle: {
readonly FROM: "from";
readonly TO: "to";
};
type SliderHandle = (typeof SliderHandle)[keyof typeof SliderHandle];
/**
* Slider Tick labels Orientation
*/
declare const TickLabelsOrientation: {
readonly Horizontal: "horizontal";
readonly TopToBottom: "toptobottom";
readonly BottomToTop: "bottomtotop";
};
type TickLabelsOrientation = (typeof TickLabelsOrientation)[keyof typeof TickLabelsOrientation];
/**
* Slider Ticks orientation
*/
declare const TicksOrientation: {
readonly Top: "top";
readonly Bottom: "bottom";
readonly Mirror: "mirror";
};
type TicksOrientation = (typeof TicksOrientation)[keyof typeof TicksOrientation];
/**
* @hidden
*/
declare class IgxSliderThumbComponent implements OnInit, OnDestroy {
private _elementRef;
private _dir;
value: any;
continuous: boolean;
thumbLabelVisibilityDuration: number;
disabled: boolean;
onPan: Subject;
stepDistance: number;
step: number;
templateRef: TemplateRef;
context: any;
type: SliderHandle;
deactiveState: boolean;
min: number;
max: number;
labels: any[];
thumbValueChange: EventEmitter;
thumbChange: EventEmitter;
thumbBlur: EventEmitter;
hoverChange: EventEmitter;
tabindex: number;
role: string;
get ariaValueNow(): any;
get ariaValueMin(): number;
get ariaValueMax(): number;
get ariaValueText(): any;
get ariaLabelAttr(): string;
ariaOrientation: string;
get ariaDisabled(): boolean;
zIndex: number;
focused: boolean;
get thumbFromClass(): boolean;
get thumbToClass(): boolean;
get thumbFromActiveClass(): boolean;
get thumbToActiveClass(): boolean;
get thumbFromDisabledClass(): boolean;
get thumbToDisabledClass(): boolean;
get thumbFromPressedClass(): boolean;
get thumbToPressedClass(): boolean;
get getDotClass(): {
'igx-slider-thumb-from__dot': boolean;
'igx-slider-thumb-to__dot': boolean;
};
isActive: boolean;
get nativeElement(): any;
get destroy(): Subject;
private _isActive;
private _isPressed;
private _destroy$;
private get thumbPositionX();
onPointerEnter(): void;
onPointerLeave(): void;
onKeyUp(event: KeyboardEvent): void;
onKeyDown(event: KeyboardEvent): void;
onBlur(): void;
onFocusListener(): void;
/**
* @hidden
*/
ngOnInit(): void;
/**
* @hidden
*/
ngOnDestroy(): void;
/**
* Show thumb label and ripple.
*/
showThumbIndicators(): void;
/**
* Hide thumb label and ripple.
*/
hideThumbIndicators(): void;
private updateThumbValue;
private calculateTrackUpdate;
private stepToProceed;
private toggleThumbIndicators;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_continuous: unknown;
static ngAcceptInputType_disabled: unknown;
static ngAcceptInputType_deactiveState: unknown;
}
/**
* **Ignite UI for Angular Slider** -
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider/slider)
*
* The Ignite UI Slider allows selection in a given range by moving the thumb along the track. The track
* can be defined as continuous or stepped, and you can choose between single and range slider types.
*
* Example:
* ```html
*
*
* ```
*/
declare class IgxSliderComponent implements ControlValueAccessor, EditorProvider, OnInit, AfterViewInit, AfterContentInit, OnChanges, OnDestroy {
private renderer;
private _el;
private _cdr;
private _ngZone;
private _dir;
/**
* @hidden
*/
get thumbFrom(): IgxSliderThumbComponent;
/**
* @hidden
*/
get thumbTo(): IgxSliderThumbComponent;
private get labelFrom();
private get labelTo();
/**
* @hidden
*/
trackRef: ElementRef;
/**
* @hidden
*/
thumbFromTemplateRef: TemplateRef;
/**
* @hidden
*/
thumbToTemplateRef: TemplateRef;
/**
* @hidden
*/
tickLabelTemplateRef: TemplateRef;
/**
* @hidden
*/
slierClass: boolean;
/**
* Sets the value of the `id` attribute.
* If not provided it will be automatically generated.
* ```html
*
* ```
*/
id: string;
/**
* Sets the duration visibility of thumbs labels. The default value is 750 milliseconds.
* ```html
*
* ```
*/
thumbLabelVisibilityDuration: number;
/**
* @hidden
*/
get disabledClass(): boolean;
/**
* Gets the type of the `IgxSliderComponent`.
* The slider can be IgxSliderType.SLIDER(default) or IgxSliderType.RANGE.
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let type = this.slider.type;
* }
*/
get type(): IgxSliderType;
/**
* Sets the type of the `IgxSliderComponent`.
* The slider can be IgxSliderType.SLIDER(default) or IgxSliderType.RANGE.
* ```typescript
* sliderType: IgxSliderType = IgxSliderType.RANGE;
* ```
* ```html
*
* ```
*/
set type(type: IgxSliderType);
/**
* Enables `labelView`, by accepting a collection of primitive values with more than one element.
* Each element will be equally spread over the slider and it will serve as a thumb label.
* Once the property is set, it will precendence over {@link maxValue}, {@link minValue}, {@link step}.
* This means that the manipulation for those properties won't be allowed.
*/
get labels(): Array;
set labels(labels: Array);
/**
* Returns the template context corresponding
* to {@link IgxThumbFromTemplateDirective} and {@link IgxThumbToTemplateDirective} templates.
*
* ```typescript
* return {
* $implicit // returns the value of the label,
* labels // returns the labels collection the user has passed.
* }
* ```
*/
get context(): any;
/**
* Sets the incremental/decremental step of the value when dragging the thumb.
* The default step is 1, and step should not be less or equal than 0.
* ```html
*
* ```
*/
set step(step: number);
/**
* Returns the incremental/decremental dragging step of the {@link IgxSliderComponent}.
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let step = this.slider.step;
* }
* ```
*/
get step(): number;
/**
* Returns if the {@link IgxSliderComponent} is disabled.
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let isDisabled = this.slider.disabled;
* }
* ```
*/
get disabled(): boolean;
/**
* Disables the component.
* ```html
*
* ```
*/
set disabled(disable: boolean);
/**
* Returns if the {@link IgxSliderComponent} is set as continuous.
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let continuous = this.slider.continuous;
* }
* ```
*/
get continuous(): boolean;
/**
* Sets the {@link IgxSliderComponent} as continuous.
* By default is considered that the {@link IgxSliderComponent} is discrete.
* Discrete {@link IgxSliderComponent} slider has step indicators over the track and visible thumb labels during interaction.
* Continuous {@link IgxSliderComponent} does not have ticks and does not show bubble labels for values.
* ```html
*
* ```
*/
set continuous(continuous: boolean);
/**
* Returns the minimal displayed track value of the `IgxSliderComponent`.
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let sliderMin = this.slider.minValue;
* }
* ```
*/
get minValue(): number;
/**
* Sets the minimal displayed track value for the `IgxSliderComponent`.
* The default minimal value is 0.
* ```html
*
* ```
*/
set minValue(value: number);
/**
* Returns the maximum displayed track value for the {@link IgxSliderComponent}.
* ```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let sliderMax = this.slider.maxValue;
* }
* ```
*/
get maxValue(): number;
/**
* Sets the maximal displayed track value for the `IgxSliderComponent`.
* The default maximum value is 100.
* ```html
*
* ```
*/
set maxValue(value: number);
/**
* Returns the lower boundary of settable values of the `IgxSliderComponent`.
* If not set, will return `minValue`.
* ```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let sliderLowBound = this.slider.lowerBound;
* }
* ```
*/
get lowerBound(): number;
/**
* Sets the lower boundary of settable values of the `IgxSliderComponent`.
* If not set is the same as min value.
* ```html
*
* ```
*/
set lowerBound(value: number);
/**
* Returns the upper boundary of settable values of the `IgxSliderComponent`.
* If not set, will return `maxValue`
* ```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let sliderUpBound = this.slider.upperBound;
* }
* ```
*/
get upperBound(): number;
/**
* Sets the upper boundary of the `IgxSliderComponent`.
* If not set is the same as max value.
* ```html
*
* ```
*/
set upperBound(value: number);
/**
* Returns the slider value. If the slider is of type {@link IgxSliderType.SLIDER} the returned value is number.
* If the slider type is {@link IgxSliderType.RANGE}.
* The returned value represents an object of {@link lowerValue} and {@link upperValue}.
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* public sliderValue(event){
* let sliderVal = this.slider.value;
* }
* ```
*/
get value(): number | IRangeSliderValue;
/**
* Sets the slider value.
* If the slider is of type {@link IgxSliderType.SLIDER}.
* The argument is number. By default the {@link value} gets the {@link lowerBound}.
* If the slider type is {@link IgxSliderType.RANGE} the argument
* represents an object of {@link lowerValue} and {@link upperValue} properties.
* By default the object is associated with the {@link lowerBound} and {@link upperBound} property values.
* ```typescript
* rangeValue = {
* lower: 30,
* upper: 60
* };
* ```
* ```html
*
* ```
*/
set value(value: number | IRangeSliderValue);
/**
* Returns the number of the presented primary ticks.
* ```typescript
* const primaryTicks = this.slider.primaryTicks;
* ```
*/
get primaryTicks(): number;
/**
* Sets the number of primary ticks. If {@link @labels} is enabled, this property won't function.
* Insted enable ticks by {@link showTicks} property.
* ```typescript
* this.slider.primaryTicks = 5;
* ```
*/
set primaryTicks(val: number);
/**
* Returns the number of the presented secondary ticks.
* ```typescript
* const secondaryTicks = this.slider.secondaryTicks;
* ```
*/
get secondaryTicks(): number;
/**
* Sets the number of secondary ticks. The property functions even when {@link labels} is enabled,
* but all secondary ticks won't present any tick labels.
* ```typescript
* this.slider.secondaryTicks = 5;
* ```
*/
set secondaryTicks(val: number);
/**
* Show/hide slider ticks
* ```html
*
* ```
*/
showTicks: boolean;
/**
* show/hide primary tick labels
* ```html
*
* ```
*/
primaryTickLabels: boolean;
/**
* show/hide secondary tick labels
* ```html
*
* ```
*/
secondaryTickLabels: boolean;
/**
* Changes ticks orientation:
* bottom - The default orienation, below the slider track.
* top - Above the slider track
* mirror - combines top and bottom orientation.
* ```html
*
* ```
*/
ticksOrientation: TicksOrientation;
/**
* Changes tick labels rotation:
* horizontal - The default rotation
* toptobottom - Rotates tick labels vertically to 90deg
* bottomtotop - Rotate tick labels vertically to -90deg
* ```html
*
* ```
*/
tickLabelsOrientation: TickLabelsOrientation;
/**
* @hidden
*/
get deactivateThumbLabel(): boolean;
/**
* This event is emitted every time the value is changed.
* ```typescript
* public change(event){
* alert("The value has been changed!");
* }
* ```
* ```html
*
* ```
*/
valueChange: EventEmitter;
/**
* This event is emitted every time the lower value of a range slider is changed.
* ```typescript
* public change(value){
* alert(`The lower value has been changed to ${value}`);
* }
* ```
* ```html
*
* ```
*/
lowerValueChange: EventEmitter;
/**
* This event is emitted every time the upper value of a range slider is changed.
* ```typescript
* public change(value){
* alert(`The upper value has been changed to ${value}`);
* }
* ```
* ```html
*
* ```
*/
upperValueChange: EventEmitter;
/**
* This event is emitted at the end of every slide interaction.
* ```typescript
* public change(event){
* alert("The value has been changed!");
* }
* ```
* ```html
*
* ```
*/
dragFinished: EventEmitter;
/**
* @hidden
*/
private ticks;
/**
* @hidden
*/
private thumbs;
/**
* @hidden
*/
private labelRefs;
/**
* @hidden
*/
onPan: Subject;
/**
* @hidden
*/
stepDistance: number;
private _pMin;
private _pMax;
private _hasViewInit;
private _minValue;
private _maxValue;
private _lowerBound;
private _upperBound;
private _lowerValue;
private _upperValue;
private _continuous;
private _disabled;
private _step;
private _value;
private _primaryTicks;
private _secondaryTicks;
private _sliding;
private _labels;
private _type;
private _destroyer$;
private _indicatorsDestroyer$;
private _indicatorsTimer;
private _onChangeCallback;
private _onTouchedCallback;
constructor();
/**
* @hidden
*/
onFocus(): void;
/**
* Returns whether the `IgxSliderComponent` type is RANGE.
* ```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* ngAfterViewInit(){
* let sliderRange = this.slider.isRange;
* }
* ```
*/
get isRange(): boolean;
/**
* Returns the lower value of a RANGE `IgxSliderComponent`.
* ```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* public lowValue(event){
* let sliderLowValue = this.slider.lowerValue;
* }
* ```
*/
get lowerValue(): number;
/**
* Sets the lower value of a RANGE `IgxSliderComponent`.
* ```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* public lowValue(event){
* this.slider.lowerValue = value;
* }
* ```
*/
set lowerValue(value: number);
/**
* Returns the upper value of a RANGE `IgxSliderComponent`.
* Returns `value` of a SLIDER `IgxSliderComponent`
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* public upperValue(event){
* let upperValue = this.slider.upperValue;
* }
* ```
*/
get upperValue(): number;
/**
* Sets the upper value of a RANGE `IgxSliderComponent`.
* ```typescript
* @ViewChild("slider2")
* public slider: IgxSliderComponent;
* public upperValue(event){
* this.slider.upperValue = value;
* }
* ```
*/
set upperValue(value: number);
/**
* Returns the value corresponding the lower label.
* ```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* let label = this.slider.lowerLabel;
* ```
*/
get lowerLabel(): string | number | boolean;
/**
* Returns the value corresponding the upper label.
* ```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* let label = this.slider.upperLabel;
* ```
*/
get upperLabel(): string | number | boolean;
/**
* Returns if label view is enabled.
* If the {@link labels} is set, the view is automatically activated.
* ```typescript
* @ViewChild("slider")
* public slider: IgxSliderComponent;
* let labelView = this.slider.labelsViewEnabled;
* ```
*/
get labelsViewEnabled(): boolean;
/**
* @hidden
*/
get showTopTicks(): boolean;
/**
* @hidden
*/
get showBottomTicks(): boolean;
/**
* @hidden
*/
ngOnChanges(changes: SimpleChanges): void;
/**
* @hidden
*/
ngOnInit(): void;
ngAfterContentInit(): void;
/**
* @hidden
*/
ngAfterViewInit(): void;
/**
* @hidden
*/
ngOnDestroy(): void;
/**
* @hidden
*/
writeValue(value: IRangeSliderValue | number): void;
/**
* @hidden
*/
registerOnChange(fn: any): void;
/**
* @hidden
*/
registerOnTouched(fn: any): void;
/** @hidden */
getEditElement(): any;
/**
*
* @hidden
*/
update(mouseX: any): void;
/**
* @hidden
*/
thumbChanged(value: number, thumbType: string): void;
/**
* @hidden
*/
onThumbChange(): void;
/**
* @hidden
*/
onHoverChange(state: boolean): void;
setValue(value: number | IRangeSliderValue, triggerChange: boolean): void;
protected onPointerDown($event: PointerEvent): void;
private onPointerMove;
protected onPointerUp($event: PointerEvent): void;
private validateInitialValue;
private findClosestThumb;
private updateLowerBoundAndMinTravelZone;
private updateUpperBoundAndMaxTravelZone;
private calculateStepDistance;
private valueInRange;
private positionHandler;
private positionHandlersAndUpdateTrack;
private closestHandle;
private setTickInterval;
private showSliderIndicators;
private hideSliderIndicators;
private toggleSliderIndicators;
private changeThumbFocusableState;
private closestTo;
private valueToFraction;
private isNullishButNotZero;
/**
* @hidden
* Normalizе the value when two-way data bind is used and {@link this.step} is set.
* @param value
*/
private normalizeByStep;
private updateTrack;
private subscribeToEvents;
private unsubscriber;
private hasValueChanged;
private emitValueChange;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_disabled: unknown;
static ngAcceptInputType_continuous: unknown;
static ngAcceptInputType_showTicks: unknown;
static ngAcceptInputType_primaryTickLabels: unknown;
static ngAcceptInputType_secondaryTickLabels: unknown;
}
declare const IGX_SLIDER_DIRECTIVES: readonly [typeof IgxSliderComponent, typeof IgxThumbFromTemplateDirective, typeof IgxThumbToTemplateDirective, typeof IgxTickLabelTemplateDirective];
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
declare class IgxSliderModule {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵmod: i0.ɵɵNgModuleDeclaration;
static ɵinj: i0.ɵɵInjectorDeclaration;
}
export { IGX_SLIDER_DIRECTIVES, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, SliderHandle, TickLabelsOrientation, TicksOrientation };
export type { IRangeSliderValue, ISliderValueChangeEventArgs };