primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
327 lines (323 loc) • 11.6 kB
TypeScript
import { SliderPassThrough, SliderOrientation, SliderChangeEvent, SliderSlideEndEvent } from 'primeng/types/slider';
export * from 'primeng/types/slider';
import * as _angular_core from '@angular/core';
import { Provider } from '@angular/core';
import { BaseEditableHolder } from 'primeng/baseeditableholder';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { BaseStyle } from 'primeng/base';
import * as i2 from 'primeng/api';
/**
*
* Slider is a component to provide input with a drag handle.
*
* [Live Demo](https://www.primeng.org/slider/)
*
* @module sliderstyle
*
*/
declare enum SliderClasses {
/**
* Class name of the root element
*/
root = "p-slider",
/**
* Class name of the track element
*/
track = "p-slider-track",
/**
* Class name of the range element
*/
range = "p-slider-range",
/**
* Class name of the handle element
*/
handle = "p-slider-handle",
/**
* Class name of the hidden input element
*/
input = "p-slider-input"
}
declare class SliderStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: ({ instance }: {
instance: any;
}) => (string | {
'p-disabled': any;
'p-slider-horizontal': any;
'p-slider-vertical': any;
})[];
track: string;
range: string;
handle: string;
input: string;
};
inlineStyles: {
root: () => {
display: string;
position: string;
'touch-action': string;
};
track: () => {
display: string;
'flex-grow': number;
position: string;
};
range: ({ instance }: {
instance: any;
}) => {
position: string;
'inset-inline-start': string;
width: string;
bottom?: undefined;
height?: undefined;
} | {
position: string;
bottom: string;
height: string;
'inset-inline-start'?: undefined;
width?: undefined;
} | {
position: string;
width: string;
'inset-inline-start'?: undefined;
bottom?: undefined;
height?: undefined;
};
handle: ({ instance, index }: {
instance: any;
index: any;
}) => {
position: string;
'inset-inline-start': string;
translate: string;
cursor: string;
'pointer-events': string;
} | {
position: string;
'inset-inline-start': string;
translate: string;
cursor?: undefined;
'pointer-events'?: undefined;
} | {
position: string;
bottom: string;
translate: string;
cursor: string;
'pointer-events': string;
} | {
position: string;
bottom: string;
translate: string;
cursor?: undefined;
'pointer-events'?: undefined;
};
startHandler: ({ instance }: {
instance: any;
}) => {
position: string;
'inset-inline-start': string;
translate: string;
cursor: string;
'pointer-events': string;
} | {
position: string;
'inset-inline-start': string;
translate: string;
cursor?: undefined;
'pointer-events'?: undefined;
} | {
position: string;
bottom: string;
translate: string;
cursor: string;
'pointer-events': string;
} | {
position: string;
bottom: string;
translate: string;
cursor?: undefined;
'pointer-events'?: undefined;
};
endHandler: ({ instance }: {
instance: any;
}) => {
position: string;
'inset-inline-start': string;
translate: string;
cursor: string;
'pointer-events': string;
} | {
position: string;
'inset-inline-start': string;
translate: string;
cursor?: undefined;
'pointer-events'?: undefined;
} | {
position: string;
bottom: string;
translate: string;
cursor: string;
'pointer-events': string;
} | {
position: string;
bottom: string;
translate: string;
cursor?: undefined;
'pointer-events'?: undefined;
};
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SliderStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<SliderStyle>;
}
interface SliderStyle extends BaseStyle {
}
declare const SLIDER_VALUE_ACCESSOR: Provider;
/**
* Slider is a component to provide input by dragging a handle along a track.
* @group Components
*/
declare class Slider extends BaseEditableHolder<SliderPassThrough> {
componentName: string;
bindDirectiveInstance: Bind;
_componentStyle: SliderStyle;
/**
* When enabled, displays an animation on click of the slider bar.
* @group Props
* @deprecated This property is no longer functional.
*/
animate: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Mininum boundary value.
* @group Props
*/
min: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Maximum boundary value.
* @group Props
*/
max: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Orientation of the slider.
* @group Props
*/
orientation: _angular_core.InputSignal<SliderOrientation>;
/**
* Step factor to increment/decrement the value.
* @group Props
*/
step: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
/**
* When specified, allows two boundary values to be picked.
* @group Props
*/
range: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Minimum number of steps between handles in range mode.
* @group Props
*/
minStepsBetweenHandles: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Disables the minimum (start) handle in range mode.
* @type boolean
* @defaultValue false
* @group Props
*/
disabledMinHandle: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Disables the maximum (end) handle in range mode.
* @type boolean
* @defaultValue false
* @group Props
*/
disabledMaxHandle: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Defines a string that labels the input for accessibility.
* @group Props
*/
ariaLabel: _angular_core.InputSignal<string | undefined>;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
* @group Props
*/
ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* When present, it specifies that the component should automatically get focus on load.
* @group Props
*/
autofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Callback to invoke on value change.
* @param {SliderChangeEvent} event - Custom value change event.
* @group Emits
*/
onChange: _angular_core.OutputEmitterRef<SliderChangeEvent>;
/**
* Callback to invoke when slide ended.
* @param {SliderSlideEndEvent} event - Custom slide end event.
* @group Emits
*/
onSlideEnd: _angular_core.OutputEmitterRef<SliderSlideEndEvent>;
onAfterViewChecked(): void;
value: _angular_core.WritableSignal<number | null>;
values: _angular_core.WritableSignal<number[] | null>;
isDragging: _angular_core.WritableSignal<boolean>;
dragging: _angular_core.Signal<boolean>;
dataDragging: _angular_core.Signal<"" | null>;
activeIndex: number;
get handleIndex(): number;
private focusedIndex;
private isHandlePointerDown;
private dragOffsetPx;
isHorizontal: _angular_core.Signal<boolean>;
isVertical: _angular_core.Signal<boolean>;
$step: _angular_core.Signal<number>;
$tabindex: _angular_core.Signal<number>;
isHandleDisabled(index: number): boolean;
getDataDisabled(index: number): '' | null;
getHandleTabindex(index: number): number;
dataP: _angular_core.Signal<string>;
private clamp;
private getPrecision;
private roundToStep;
private normalizeValue;
getValuePercent(value: number): number;
getHandleValue(index: number): number;
private getValues;
private getValueFromPointer;
private getClosestValueIndex;
private getHandleElement;
private updateValueAt;
private updateValueFromPointer;
onTrackPointerDown(event: PointerEvent): void;
onTrackPointerMove(event: PointerEvent): void;
onTrackPointerUp(event: PointerEvent): void;
onHandlePointerDown(event: PointerEvent, index: number): void;
onInputChange(event: Event, index: number): void;
onInputFocus(_event: FocusEvent, index: number): void;
onInputBlur(event: FocusEvent, index: number): void;
onKeyDown(event: KeyboardEvent, index: number): void;
private decrementValue;
private incrementValue;
/**
* @override
*
* @see {@link BaseEditableHolder.writeControlValue}
*/
writeControlValue(value: any): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Slider, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Slider, "p-slider", never, { "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "minStepsBetweenHandles": { "alias": "minStepsBetweenHandles"; "required": false; "isSignal": true; }; "disabledMinHandle": { "alias": "disabledMinHandle"; "required": false; "isSignal": true; }; "disabledMaxHandle": { "alias": "disabledMaxHandle"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; }, { "onChange": "onChange"; "onSlideEnd": "onSlideEnd"; }, never, never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class SliderModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SliderModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SliderModule, never, [typeof Slider, typeof i2.SharedModule], [typeof Slider, typeof i2.SharedModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<SliderModule>;
}
export { SLIDER_VALUE_ACCESSOR, Slider, SliderClasses, SliderModule, SliderStyle };