Bootstrap

API slider

createSlider

constant

const createSlider: WidgetFactory<SliderWidget>

Create a Slider with given config props

Param

an optional slider config

Returns

a SliderWidget


getSliderDefaultConfig

constant

const getSliderDefaultConfig: () => SliderProps

Retrieve a shallow copy of the default Slider config

Returns

SliderProps

the default Slider config


HandleDisplayOptions

interface

Options for displaying a handle in a slider component.

Properties
left

left: null | number

Left offset of the handle in %


top

top: null | number

Top offset of the handle in %


ProgressDisplayOptions

interface

Options for displaying progress in a slider component.

Properties
bottom

bottom: null | number

Bottom offset of the progress in %


height

height: number

Height of the progress in %


id

id: number

Id of the progress


left

left: null | number

Right offset of the progress in %


right

right: null | number

Left offset of the progress in %


top

top: null | number

Top offset of the progress in %


width

width: number

Width of the progress in %


SliderComponent

class

SliderComponent is an Angular component that extends the BaseWidgetDirective to provide a customizable slider widget. This component allows for various configurations and customizations through its inputs and outputs.

Implements
Properties
ariaLabel

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

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

Param

index of the handle in the sorted list

Default Value
() => 'Value'

ariaLabelledBy

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

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

Param

index of the handle in the sorted list

Default Value
() => ''

ariaValueText

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

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

Param

value of the handle

Param

index of the handle in the sorted list

Default Value
(value: number) => ''

className

readonly className: InputSignal<undefined | string>

CSS classes to be applied on the widget main container

Default Value

''


disabled

readonly disabled: InputSignalWithTransform<undefined | boolean, unknown>

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

Default Value

false


handle

readonly handle: InputSignal<SlotContent<SliderSlotHandleContext>>

Slot to change the handlers


label

readonly label: InputSignal<SlotContent<SliderSlotLabelContext>>

Slot to change the default labels of the slider

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

max

readonly max: InputSignalWithTransform<undefined | number, unknown>

Maximum value that can be assigned to the slider

Default Value

100


min

readonly min: InputSignalWithTransform<undefined | number, unknown>

Minimum value that can be assigned to the slider

Default Value

0


readonly

readonly readonly: InputSignalWithTransform<undefined | boolean, unknown>

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

Default Value

false


rtl

readonly rtl: InputSignalWithTransform<undefined | boolean, unknown>

It true slider display is inversed

Default Value

false


showMinMaxLabels

readonly showMinMaxLabels: InputSignalWithTransform<undefined | boolean, unknown>

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

Default Value

true


showTicks

readonly showTicks: InputSignalWithTransform<undefined | boolean, unknown>

If true the ticks are displayed on the slider

Default Value

false


showTickValues

readonly showTickValues: InputSignalWithTransform<undefined | boolean, unknown>

If true the tick values are displayed on the slider

Default Value

true


showValueLabels

readonly showValueLabels: InputSignalWithTransform<undefined | boolean, unknown>

If true the value labels are displayed on the slider

Default Value

true


stepSize

readonly stepSize: InputSignalWithTransform<undefined | number, unknown>

Unit value between slider steps

Default Value

1


structure

readonly structure: InputSignal<SlotContent<SliderContext>>

Slot to change the default display of the slider


tick

readonly tick: InputSignal<SlotContent<SliderSlotTickContext>>

Slot to change the ticks


tickInterval

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

Default Value

0


values

readonly values: InputSignal<undefined | number[]>

Current slider values

Default Value

[0]


valuesChange

readonly valuesChange: OutputEmitterRef<number[]>

An event emitted when slider values are changed

Event payload equals to the updated slider values

Default Value
() => {}

vertical

readonly vertical: InputSignalWithTransform<undefined | boolean, unknown>

If true is vertically positioned otherwise it is horizontal

Default Value

false

Accessors
api
Get Signature

get api(): W["api"]

Retrieves the widget api

Returns

W["api"]

the widget api


directives
Get Signature

get directives(): W["directives"]

Retrieves the widget directives

Returns

W["directives"]

the widget directives


state
Get Signature

get state(): AngularState<W>

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

Returns

AngularState<W>

the widget state

Methods
onChange

onChange(_): void

Control value accessor methods

Parameters
_

any

Returns

void


registerOnChange

registerOnChange(fn): void

Parameters
fn

(value) => any

The callback function to register

Returns

void

Description

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.

Usage Notes
Store the change function

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)'
}
Implementation of

ControlValueAccessor.registerOnChange


registerOnTouched

registerOnTouched(fn): void

Parameters
fn

() => any

The callback function to register

Returns

void

Description

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".

Usage Notes
Store the callback function

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()'
}
Implementation of

ControlValueAccessor.registerOnTouched


setDisabledState

setDisabledState(isDisabled): void

Parameters
isDisabled

boolean

The disabled status to set on the element

Returns

void

Description

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.

Usage Notes

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);
}
Implementation of

ControlValueAccessor.setDisabledState


writeValue

writeValue(value): void

Parameters
value

any

Returns

void

Description

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.

Usage Notes
Write a value to the element

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

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

ControlValueAccessor.writeValue


SliderContext

interface

Represents the context for a Slider component. This type is an alias for WidgetSlotContext<SliderWidget>.

Extended by
Properties
api

api: object

all the api functions to interact with the widget


directives

directives: SliderDirectives

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


state

state: AngularState<SliderWidget>

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


sliderDefaultSlotHandle

constant

const sliderDefaultSlotHandle: SlotContent<SliderSlotHandleContext>

A constant representing the default slot handle for the slider component.


sliderDefaultSlotStructure

constant

const sliderDefaultSlotStructure: SlotContent<SliderContext>

Represents the default slot structure for the slider component.


sliderDefaultSlotTick

constant

const sliderDefaultSlotTick: SlotContent<SliderSlotTickContext>

A constant representing the default slot tick for the slider component.


SliderDirectives

interface

Interface representing various directives used in the slider component.

Properties
clickableAreaDirective

clickableAreaDirective: Directive

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


combinedHandleLabelDisplayDirective

combinedHandleLabelDisplayDirective: Directive

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


handleDirective

handleDirective: Directive<{ item: SliderHandle; }>

Directive to apply to the slider handle if any


handleEventsDirective

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

Directive to apply handle events handlers


handleLabelDisplayDirective

handleLabelDisplayDirective: Directive<{ index: number; }>

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


maxLabelDirective

maxLabelDirective: Directive

Directive to get the maxLabel elementRef


minLabelDirective

minLabelDirective: Directive

Directive to get the minLabel elementRef


progressDisplayDirective

progressDisplayDirective: Directive<{ option: ProgressDisplayOptions; }>

Directive used to style the progress display for each handle


sliderDirective

sliderDirective: Directive

Directive to get the slider component elementRef


tickDirective

tickDirective: Directive<{ tick: SliderTick; }>

Directive to apply to the slider tick


tickLabelDirective

tickLabelDirective: Directive<{ tick: SliderTick; }>

Directive to apply to the slider tick label


SliderHandle

interface

Represents a handle in a slider component.

Properties
ariaLabel

ariaLabel: undefined | string

ariaLabel of the handle


ariaLabelledBy

ariaLabelledBy: undefined | string

aria-labelledBy of the handle


ariaValueText

ariaValueText: undefined | string

ariaValueText of the handle


id

id: number

Handle id


value

value: number

Value of the handle


SliderHandleDirective

class

Directive representing a handle for a slider component.

This directive uses a template reference to render the SliderSlotHandleContext.


SliderLabelDirective

class

Directive to provide a template reference for slider labels.

This directive uses a template reference to render the SliderSlotLabelContext.


SliderProps

interface

Represents the properties for the Slider component.

Properties
ariaLabel

ariaLabel: (sortedIndex) => string

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

Parameters
sortedIndex

number

index of the handle in the sorted list

Returns

string

Default Value
() => 'Value'

ariaLabelledBy

ariaLabelledBy: (sortedIndex) => string

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

Parameters
sortedIndex

number

index of the handle in the sorted list

Returns

string

Default Value
() => ''

ariaValueText

ariaValueText: (value, sortedIndex) => string

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

Parameters
value

number

value of the handle

sortedIndex

number

index of the handle in the sorted list

Returns

string

Default Value
(value: number) => ''

className

className: string

CSS classes to be applied on the widget main container

Default Value

''


disabled

disabled: boolean

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

Default Value

false


handle

handle: SlotContent<SliderSlotHandleContext>

Slot to change the handlers


label

label: SlotContent<SliderSlotLabelContext>

Slot to change the default labels of the slider

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

max

max: number

Maximum value that can be assigned to the slider

Default Value

100


min

min: number

Minimum value that can be assigned to the slider

Default Value

0


onValuesChange

onValuesChange: (values) => void

An event emitted when slider values are changed

Event payload equals to the updated slider values

Parameters
values

number[]

Returns

void

Default Value
() => {}

readonly

readonly: boolean

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

Default Value

false


rtl

rtl: boolean

It true slider display is inversed

Default Value

false


showMinMaxLabels

showMinMaxLabels: boolean

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

Default Value

true


showTicks

showTicks: boolean

If true the ticks are displayed on the slider

Default Value

false


showTickValues

showTickValues: boolean

If true the tick values are displayed on the slider

Default Value

true


showValueLabels

showValueLabels: boolean

If true the value labels are displayed on the slider

Default Value

true


stepSize

stepSize: number

Unit value between slider steps

Default Value

1


structure

structure: SlotContent<SliderContext>

Slot to change the default display of the slider


tick

tick: SlotContent<SliderSlotTickContext>

Slot to change the ticks


tickInterval

tickInterval: number

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

Default Value

0


values

values: number[]

Current slider values

Default Value

[0]


vertical

vertical: boolean

If true is vertically positioned otherwise it is horizontal

Default Value

false


SliderSlotHandleContext

interface

Represents the context for a slider slot handle. This type extends the SliderContext and includes an additional item property of type SliderHandle.

Properties
api

api: object

all the api functions to interact with the widget


directives

directives: SliderDirectives

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


item

item: SliderHandle

the handle context


state

state: AngularState<SliderWidget>

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


SliderSlotLabelContext

interface

Represents the context for a slider slot label, extending the base SliderContext with an additional value property.

Properties
api

api: object

all the api functions to interact with the widget


directives

directives: SliderDirectives

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


state

state: AngularState<SliderWidget>

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


value

value: number

the value of the handle the label is attached to


SliderSlotTickContext

interface

Represents the context for a slider tick slot

Properties
api

api: object

all the api functions to interact with the widget


directives

directives: SliderDirectives

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


state

state: AngularState<SliderWidget>

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


tick

tick: SliderTick

tick context


SliderState

interface

Represents the state of a slider component.

Properties
className

className: string

CSS classes to be applied on the widget main container

Default Value

''


combinedLabelDisplay

combinedLabelDisplay: boolean

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


combinedLabelPositionLeft

combinedLabelPositionLeft: number

Combined label left offset in %


combinedLabelPositionTop

combinedLabelPositionTop: number

Combined label top offset in %


disabled

disabled: boolean

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

Default Value

false


handle

handle: SlotContent<SliderSlotHandleContext>

Slot to change the handlers


handleDisplayOptions

handleDisplayOptions: HandleDisplayOptions[]

Array of objects representing handle display options


interactive

interactive: boolean

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


label

label: SlotContent<SliderSlotLabelContext>

Slot to change the default labels of the slider

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

max

max: number

Maximum value that can be assigned to the slider

Default Value

100


maxValueLabelDisplay

maxValueLabelDisplay: boolean

If true, the maximum label will be visible


min

min: number

Minimum value that can be assigned to the slider

Default Value

0


minValueLabelDisplay

minValueLabelDisplay: boolean

If true, the minimum label will be visible


progressDisplayOptions

progressDisplayOptions: ProgressDisplayOptions[]

Array of objects representing progress display options


readonly

readonly: boolean

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

Default Value

false


rtl

rtl: boolean

It true slider display is inversed

Default Value

false


showMinMaxLabels

showMinMaxLabels: boolean

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

Default Value

true


showTicks

showTicks: boolean

If true the ticks are displayed on the slider

Default Value

false


showValueLabels

showValueLabels: boolean

If true the value labels are displayed on the slider

Default Value

true


sortedHandles

sortedHandles: SliderHandle[]

Array of the sorted handles to display


sortedValues

sortedValues: number[]

Sorted slider values


stepSize

stepSize: number

Unit value between slider steps

Default Value

1


structure

structure: SlotContent<SliderContext>

Slot to change the default display of the slider


tick

tick: SlotContent<SliderSlotTickContext>

Slot to change the ticks


ticks

ticks: SliderTick[]

Array of ticks to display on the slider component


values

values: number[]

Current slider values

Default Value

[0]


vertical

vertical: boolean

If true is vertically positioned otherwise it is horizontal

Default Value

false


SliderStructureDirective

class

Directive that provides structure for the slider component.

This directive uses a TemplateRef to handle the context of the slider slot.


SliderTick

interface

Represents a tick in a slider component.

Properties
className?

optional className: null | string

CSS classes to be applied on the tick


displayLabel

displayLabel: boolean

If true the tick label is displayed


legend?

optional legend: null | string

Visualized optional explanation of the label


position

position: number

Position of the tick in percent


selected

selected: boolean

If true the tick has selected style


value

value: number

Value of the tick


SliderTickDirective

class

Directive representing a tick for a slider component.

This directive uses a template reference to render the SliderSlotTickContext.


SliderWidget

type alias

SliderWidget = Widget<SliderProps, SliderState, object, SliderDirectives>

Represents a slider widget component.