const
createSlider:WidgetFactory
<SliderWidget
>
Create a Slider with given config props
an optional slider config
a SliderWidget
const
getSliderDefaultConfig: () =>SliderProps
Retrieve a shallow copy of the default Slider config
the default Slider config
Options for displaying a handle in a slider component.
left:
null
|number
Left offset of the handle in %
top:
null
|number
Top offset of the handle in %
Options for displaying progress in a slider component.
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 %
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.
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
min:InputSignalWithTransform
<undefined
|number
,unknown
>
Minimum value that can be assigned to the slider
0
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
Represents the context for a Slider component.
This type is an alias for WidgetSlotContext<SliderWidget>
.
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
<SliderWidget
>
The state of the widget. Each property of the state is exposed through an Angular Signal
const
sliderDefaultSlotHandle:SlotContent
<SliderSlotHandleContext
>
A constant representing the default slot handle for the slider component.
const
sliderDefaultSlotStructure:SlotContent
<SliderContext
>
Represents the default slot structure for the slider component.
const
sliderDefaultSlotTick:SlotContent
<SliderSlotTickContext
>
A constant representing the default slot tick for the slider component.
Interface representing various directives used in the slider component.
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
<{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
Represents a handle in a slider component.
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
Directive representing a handle for a slider component.
This directive uses a template reference to render the SliderSlotHandleContext.
Directive to provide a template reference for slider labels.
This directive uses a template reference to render the SliderSlotLabelContext.
Represents the properties for the Slider component.
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
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
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
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
Represents the context for a slider slot handle.
This type extends the SliderContext
and includes an additional item
property of type SliderHandle
.
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
<SliderWidget
>
The state of the widget. Each property of the state is exposed through an Angular Signal
Represents the context for a slider slot label, extending the base SliderContext
with an additional value
property.
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
<SliderWidget
>
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
Represents the context for a slider tick slot
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
<SliderWidget
>
The state of the widget. Each property of the state is exposed through an Angular Signal
tick:
SliderTick
tick context
Represents the state of a slider component.
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
Directive that provides structure for the slider component.
This directive uses a TemplateRef
to handle the context of the slider slot.
Represents a tick in a slider component.
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
Directive representing a tick for a slider component.
This directive uses a template reference to render the SliderSlotTickContext.
SliderWidget =
Widget
<SliderProps
,SliderState
,object
,SliderDirectives
>
Represents a slider widget component.