API slider

an optional slider config

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 the progress in %

id: number

Id of the progress

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 %

• ControlValueAccessor

readonly ariaLabel: InputSignal<undefined | (sortedIndex) => string>

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

index of the handle in the sorted list

() => 'Value'

readonly ariaLabelledBy: InputSignal<undefined | (sortedIndex) => string>

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

index of the handle in the sorted list

() => ''

readonly ariaValueText: InputSignal<undefined | (value, sortedIndex) => string>

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

value of the handle

index of the handle in the sorted list

(value: number) => ''

readonly className: InputSignal<undefined | string>

CSS classes to be applied on the widget main container

''

readonly disabled: InputSignalWithTransform<undefined | boolean, unknown>

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

false

readonly handle: InputSignal<SlotContent<SliderSlotHandleContext>>

Slot to change the handlers

readonly label: InputSignal<SlotContent<SliderSlotLabelContext>>

Slot to change the default labels of the slider

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

readonly max: InputSignalWithTransform<undefined | number, unknown>

Maximum value that can be assigned to the slider

100

readonly maxRange: InputSignalWithTransform<undefined | number, unknown>

Maximum distance between two values When set to 0, no maximum distance constraint is applied.

0

readonly min: InputSignalWithTransform<undefined | number, unknown>

Minimum value that can be assigned to the slider

0

readonly minRange: InputSignalWithTransform<undefined | number, unknown>

Minimum distance between two values. When set to 0, no minimum distance constraint is applied.

0

readonly pushRange: InputSignalWithTransform<undefined | boolean, unknown>

When true, if moving a value would break the minRange or maxRange constraint, it will instead push or pull the neighboring values to keep the allowed range rather than just stopping.

false

readonly readonly: InputSignalWithTransform<undefined | boolean, unknown>

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

false

readonly rtl: InputSignalWithTransform<undefined | boolean, unknown>

It true slider display is inversed

false

readonly showMinMaxLabels: InputSignalWithTransform<undefined | boolean, unknown>

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

true

readonly showTicks: InputSignalWithTransform<undefined | boolean, unknown>

If true the ticks are displayed on the slider

false

readonly showTickValues: InputSignalWithTransform<undefined | boolean, unknown>

If true the tick values are displayed on the slider

true

readonly showValueLabels: InputSignalWithTransform<undefined | boolean, unknown>

If true the value labels are displayed on the slider

true

readonly stepSize: InputSignalWithTransform<undefined | number, unknown>

Unit value between slider steps

1

readonly structure: InputSignal<SlotContent<SliderContext>>

Slot to change the default display of the slider

readonly tick: InputSignal<SlotContent<SliderSlotTickContext>>

Slot to change the ticks

readonly tickInterval: InputSignalWithTransform<undefined | number, unknown>

Unit value between the ticks If value is set to 0 the stepSize is used to space the ticks

0

readonly values: InputSignal<undefined | number[]>

Current slider values

[0]

readonly valuesChange: OutputEmitterRef<number[]>

An event emitted when slider values are changed

Event payload equals to the updated slider values

() => {}

readonly vertical: InputSignalWithTransform<undefined | boolean, unknown>

If true is vertically positioned otherwise it is horizontal

false

get api(): W["api"]

Retrieves the widget api

W["api"]

the widget api

get directives(): W["directives"]

Retrieves the widget directives

W["directives"]

the widget directives

get state(): AngularState<W>

Retrieves the widget state. Each property of the state is exposed through an Angular Signal

AngularState<W>

the widget state

onChange(_): void

Control value accessor methods

any

void

registerOnChange(fn): void

(value) => any

The callback function to register

void

Registers a callback function that is called when the control's value changes in the UI.

This method is called by the forms API on initialization to update the form model when values propagate from the view to the model.

When implementing the registerOnChange method in your own value accessor, save the given function so your class calls it at the appropriate time.

The following example stores the provided function as an internal method.

registerOnChange(fn: (_: any) => void): void {
  this._onChange = fn;
}

When the value changes in the UI, call the registered function to allow the forms API to update itself:

host: {
   '(change)': '_onChange($event.target.value)'
}

ControlValueAccessor.registerOnChange

registerOnTouched(fn): void

() => any

The callback function to register

void

Registers a callback function that is called by the forms API on initialization to update the form model on blur.

When implementing registerOnTouched in your own value accessor, save the given function so your class calls it when the control should be considered blurred or "touched".

The following example stores the provided function as an internal method.

registerOnTouched(fn: any): void {
  this._onTouched = fn;
}

On blur (or equivalent), your class should call the registered function to allow the forms API to update itself:

host: {
   '(blur)': '_onTouched()'
}

ControlValueAccessor.registerOnTouched

setDisabledState(isDisabled): void

boolean

The disabled status to set on the element

void

Function that is called by the forms API when the control status changes to or from 'DISABLED'. Depending on the status, it enables or disables the appropriate DOM element.

The following is an example of writing the disabled property to a native DOM element:

setDisabledState(isDisabled: boolean): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
}

ControlValueAccessor.setDisabledState

writeValue(value): void

any

void

Writes a new value to the element.

This method is called by the forms API to write to the view when programmatic changes from model to view are requested.

The following example writes a value to the native DOM element.

writeValue(value: any): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
}

ControlValueAccessor.writeValue

• SliderSlotTickContext
• SliderSlotHandleContext
• SliderSlotLabelContext

api: object

all the api functions to interact with the widget

directives: SliderDirectives

directives to be used on html elements in the template of the widget or in the slots

state: AngularState<W>

The state of the widget. Each property of the state is exposed through an Angular Signal

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

containerDirective: Directive

Directive to apply to the slider container wrapping the slider content

handleDirective: Directive<{ item: SliderHandle; }>

Directive to apply to the slider handle if any

handleEventsDirective: Directive<{ item: { id: number; }; }>

Directive to apply handle events handlers

handleLabelDisplayDirective: Directive<{ index: number; }>

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

maxLabelDirective: Directive

Directive to get the maxLabel elementRef

minLabelDirective: Directive

Directive to get the minLabel elementRef

progressDisplayDirective: Directive<{ option: ProgressDisplayOptions; }>

Directive used to style the progress display for each handle

sliderDirective: Directive

Directive to get the slider component elementRef

tickDirective: Directive<{ tick: SliderTick; }>

Directive to apply to the slider tick

tickLabelDirective: Directive<{ tick: SliderTick; }>

Directive to apply to the slider tick label

ariaLabel: undefined | string

ariaLabel of the handle

ariaLabelledBy: undefined | string

aria-labelledBy of the handle

ariaValueText: undefined | string

ariaValueText of the handle

id: number

Handle id

value: number

Value of the handle

ariaLabel: (sortedIndex) => string

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

number

index of the handle in the sorted list

string

() => 'Value'

ariaLabelledBy: (sortedIndex) => string

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

number

index of the handle in the sorted list

string

() => ''

ariaValueText: (value, sortedIndex) => string

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

number

value of the handle

number

index of the handle in the sorted list

string

(value: number) => ''

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

maxRange: number

Maximum distance between two values When set to 0, no maximum distance constraint is applied.

0

min: number

Minimum value that can be assigned to the slider

0

minRange: number

Minimum distance between two values. When set to 0, no minimum distance constraint is applied.

0

onValuesChange: (values) => void

An event emitted when slider values are changed

Event payload equals to the updated slider values

number[]

void

() => {}

pushRange: boolean

When true, if moving a value would break the minRange or maxRange constraint, it will instead push or pull the neighboring values to keep the allowed range rather than just stopping.

false

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

showTicks: boolean

If true the ticks are displayed on the slider

false

showTickValues: boolean

If true the tick values 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

tick: SlotContent<SliderSlotTickContext>

Slot to change the ticks

tickInterval: number

Unit value between the ticks If value is set to 0 the stepSize is used to space the ticks

0

values: number[]

Current slider values

[0]

vertical: boolean

If true is vertically positioned otherwise it is horizontal

false

api: object

all the api functions to interact with the widget

directives: SliderDirectives

directives to be used on html elements in the template of the widget or in the slots

item: SliderHandle

the handle context

state: AngularState<W>

The state of the widget. Each property of the state is exposed through an Angular Signal

api: object

all the api functions to interact with the widget

directives: SliderDirectives

directives to be used on html elements in the template of the widget or in the slots

state: AngularState<W>

The state of the widget. Each property of the state is exposed through an Angular Signal

value: number

the value of the handle the label is attached to

api: object

all the api functions to interact with the widget

directives: SliderDirectives

directives to be used on html elements in the template of the widget or in the slots

state: AngularState<W>

The state of the widget. Each property of the state is exposed through an Angular Signal

tick: SliderTick

tick context

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

showTicks: boolean

If true the ticks are displayed on the slider

false

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

tick: SlotContent<SliderSlotTickContext>

Slot to change the ticks

ticks: SliderTick[]

Array of ticks to display on the slider component

values: number[]

Current slider values

[0]

vertical: boolean

If true is vertically positioned otherwise it is horizontal

false

optional className: null | string

CSS classes to be applied on the tick

displayLabel: boolean

If true the tick label is displayed

optional legend: null | string

Visualized optional explanation of the label

position: number

Position of the tick in percent

selected: boolean

If true the tick has selected style

value: number

Value of the tick