API slider

• props?: PropsConfig<SliderProps>

SliderWidget

a SliderWidget

SliderProps

the default Slider config

left: null | number

Left offset of the handle in %

top: null | number

Top offset of the handle in %

bottom: null | number

Bottom offset of the progress in %

height: number

Height of hte progress in %

left: null | number

Right offset of the progress in %

right: null | number

Left offset of the progress in %

top: null | number

Top offset of the progress in %

width: number

Width of the progress in %

click(event): void

Method to handle click on the slider

• event: MouseEvent

mouse event

void

keydown(event, handleNumber): void

Method to process the keyboard event

• event: KeyboardEvent

keyboard event object

• handleNumber: number

id of the modified handle

void

mouseDown(event, handleId): void

Method describing the behavior of the slider handle on mouse down event

• event: MouseEvent

mouse event

• handleId: number

numeric id of the handle

void

touchStart(event, handleId): void

Method describing the behavior of the slider handle on touch start event

• event: TouchEvent

touch event

• handleId: number

number id of the handle

void

• AfterContentChecked

new SliderComponent(): SliderComponent

SliderComponent

readonly _widget: AngularWidget<SliderWidget>

ariaLabelHandle: undefined | (value, sortedIndex, index) => string

Return the value for the 'aria-label' attribute for the handle

value of the handle

index of the handle in the sorted list

index of the handle in the original list

(value: number) => '' + value

ariaValueText: undefined | (value, sortedIndex, index) => string

Return the value for the 'aria-valuetext' attribute for the handle

value of the handle

index of the handle in the sorted list

index of the handle in the original list

(value: number) => '' + value

className: undefined | string

CSS classes to be applied on the widget main container

''

readonly defaultSlots: WritableSignal<Partial<SliderProps>, Partial<SliderProps>>

disabled: undefined | boolean

If true slider value cannot be changed and the slider cannot be focused

false

handle: SlotContent<SliderSlotHandleContext>

Slot to change the handlers

label: SlotContent<SliderSlotLabelContext>

Slot to change the default labels of the slider

({value}: SliderSlotLabelContext) => '' + value

max: undefined | number

Maximum value that can be assigned to the slider

100

min: undefined | number

Minimum value that can be assigned to the slider

0

readonly: undefined | boolean

If true slider value cannot be changed but the slider is still focusable

false

rtl: undefined | boolean

It true slider display is inversed

false

showMinMaxLabels: undefined | boolean

If true the min and max labels are displayed on the slider

true

showValueLabels: undefined | boolean

If true the value labels are displayed on the slider

true

slotHandleFromContent: undefined | SliderHandleDirective

slotLabelFromContent: undefined | SliderLabelDirective

slotStructureFromContent: undefined | SliderStructureDirective

stepSize: undefined | number

Unit value between slider steps

1

structure: SlotContent<SliderContext>

Slot to change the default display of the slider

values: undefined | number[]

Current slider values

[0]

valuesChange: EventEmitter<number[]>

An event emitted when slider values are changed

Event payload equals to the updated slider values

() => {}

vertical: undefined | boolean

If true is vertically positioned otherwise it is horizontal

false

get api(): W["api"]

W["api"]

get state(): Signal<WidgetState<W>>

Signal<WidgetState<W>>

get widget(): ContextWidget<W>

ContextWidget<W>

handleBlur(): void

void

ngAfterContentChecked(): void

A callback method that is invoked immediately after the default change detector has completed checking all of the directive's content.

void

AfterContentChecked.ngAfterContentChecked

ngOnChanges(changes): void

• changes: SimpleChanges

void

ngOnInit(): void

void

onChange(_): void

Control value accessor methods

• _: any

void

onTouched(): void

void

registerOnChange(fn): void

• fn

void

registerOnTouched(fn): void

• fn

void

setDisabledState(isDisabled): void

• isDisabled: boolean

void

writeValue(value): void

• value: any

void

new SliderDefaultHandleSlotComponent(): SliderDefaultHandleSlotComponent

SliderDefaultHandleSlotComponent

readonly handle: TemplateRef<SliderSlotHandleContext>

onKeyDown(event, handleId, widgetOnKeyDownFn): void

• event: KeyboardEvent

• handleId: number

• widgetOnKeyDownFn

void

new SliderDefaultStructureSlotComponent(): SliderDefaultStructureSlotComponent

SliderDefaultStructureSlotComponent

structure: TemplateRef<SliderContext>

clickableAreaDirective: Directive

Directive to apply to the slider clickable area, to directly move the handle to a given specific position

combinedHandleLabelDisplayDirective: Directive

Directive to apply to the handle when combined label display is active

handleDirective: Directive<object>

Directive to apply to the slider handle if any

item: SliderHandle

handleLabelDisplayDirective: Directive<object>

Directive to apply to the handle when combined label display is not active

index: number

maxLabelDirective: Directive

Directive to get the maxLabel elementRef

minLabelDirective: Directive

Directive to get the minLabel elementRef

progressDisplayDirective: Directive<object>

Directive used to style the progress display for each handle

option: ProgressDisplayOptions

sliderDirective: Directive

Directive to get the slider component elementRef

ariaLabel: string

ariaLabel of the handle

ariaValueText: string

ariaValueText of the handle

id: number

Handle id

value: number

Value of the handle

new SliderHandleDirective(): SliderHandleDirective

SliderHandleDirective

templateRef: TemplateRef<any>

static ngTemplateContextGuard(_dir, context): context is SliderSlotHandleContext

• _dir: SliderHandleDirective

• context: unknown

context is SliderSlotHandleContext

new SliderLabelDirective(): SliderLabelDirective

SliderLabelDirective

templateRef: TemplateRef<any>

static ngTemplateContextGuard(_dir, context): context is SliderSlotLabelContext

• _dir: SliderLabelDirective

• context: unknown

context is SliderSlotLabelContext

ariaLabelHandle: (value, sortedIndex, index) => string

Return the value for the 'aria-label' attribute for the handle

• value: number

value of the handle

• sortedIndex: number

index of the handle in the sorted list

• index: number

index of the handle in the original list

string

(value: number) => '' + value

ariaValueText: (value, sortedIndex, index) => string

Return the value for the 'aria-valuetext' attribute for the handle

• value: number

value of the handle

• sortedIndex: number

index of the handle in the sorted list

• index: number

index of the handle in the original list

string

(value: number) => '' + value

className: string

CSS classes to be applied on the widget main container

''

disabled: boolean

If true slider value cannot be changed and the slider cannot be focused

false

handle: SlotContent<SliderSlotHandleContext>

Slot to change the handlers

label: SlotContent<SliderSlotLabelContext>

Slot to change the default labels of the slider

({value}: SliderSlotLabelContext) => '' + value

max: number

Maximum value that can be assigned to the slider

100

min: number

Minimum value that can be assigned to the slider

0

onValuesChange: (values) => void

An event emitted when slider values are changed

Event payload equals to the updated slider values

• values: number[]

void

() => {}

readonly: boolean

If true slider value cannot be changed but the slider is still focusable

false

rtl: boolean

It true slider display is inversed

false

showMinMaxLabels: boolean

If true the min and max labels are displayed on the slider

true

showValueLabels: boolean

If true the value labels are displayed on the slider

true

stepSize: number

Unit value between slider steps

1

structure: SlotContent<SliderContext>

Slot to change the default display of the slider

values: number[]

Current slider values

[0]

vertical: boolean

If true is vertically positioned otherwise it is horizontal

false

item: SliderHandle

value: number

className: string

CSS classes to be applied on the widget main container

''

combinedLabelDisplay: boolean

If true, the label when the handles are close is visible

combinedLabelPositionLeft: number

Combined label left offset in %

combinedLabelPositionTop: number

Combined label top offset in %

disabled: boolean

If true slider value cannot be changed and the slider cannot be focused

false

handle: SlotContent<SliderSlotHandleContext>

Slot to change the handlers

handleDisplayOptions: HandleDisplayOptions[]

Array of objects representing handle display options

interactive: boolean

Check if the slider is interactive, meaning it is not disabled or readonly

label: SlotContent<SliderSlotLabelContext>

Slot to change the default labels of the slider

({value}: SliderSlotLabelContext) => '' + value

max: number

Maximum value that can be assigned to the slider

100

maxValueLabelDisplay: boolean

If true, the maximum label will be visible

min: number

Minimum value that can be assigned to the slider

0

minValueLabelDisplay: boolean

If true, the minimum label will be visible

progressDisplayOptions: ProgressDisplayOptions[]

Array of objects representing progress display options

readonly: boolean

If true slider value cannot be changed but the slider is still focusable

false

rtl: boolean

It true slider display is inversed

false

showMinMaxLabels: boolean

If true the min and max labels are displayed on the slider

true

showValueLabels: boolean

If true the value labels are displayed on the slider

true

sortedHandles: SliderHandle[]

Array of the sorted handles to display

sortedValues: number[]

Sorted slider values

stepSize: number

Unit value between slider steps

1

structure: SlotContent<SliderContext>

Slot to change the default display of the slider

values: number[]

Current slider values

[0]

vertical: boolean

If true is vertically positioned otherwise it is horizontal

false

new SliderStructureDirective(): SliderStructureDirective

SliderStructureDirective

templateRef: TemplateRef<any>

static ngTemplateContextGuard(_dir, context): context is SliderSlotHandleContext

• _dir: SliderStructureDirective

• context: unknown

context is SliderSlotHandleContext