Colors of the component are using the Bootstrap CSS vars (along with a default color) so that if you are using bootstrap the component will take your color palette.
createSlider(
props?):SliderWidget
Create a Slider with given config props
a SliderWidget
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.
readonlyariaLabel:InputSignal<undefined| (sortedIndex) =>string>
Return the value for the 'aria-label' attribute for the handle
index of the handle in the sorted list
() => 'Value'
readonlyariaLabelledBy:InputSignal<undefined| (sortedIndex) =>string>
Return the value for the 'aria-labelledBy' attribute for the handle
index of the handle in the sorted list
() => ''
readonlyariaValueText: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) => ''
readonlyclassName:InputSignal<undefined|string>
CSS classes to be applied on the widget main container
''
readonlydisabled:InputSignalWithTransform<undefined|boolean,unknown>
If true slider value cannot be changed and the slider cannot be focused
false
readonlyhandle:InputSignal<SlotContent<SliderSlotHandleContext>>
Slot to change the handlers
readonlylabel:InputSignal<SlotContent<SliderSlotLabelContext>>
Slot to change the default labels of the slider
({value}: SliderSlotLabelContext) => '' + value
readonlymax:InputSignalWithTransform<undefined|number,unknown>
Maximum value that can be assigned to the slider
100
readonlymin:InputSignalWithTransform<undefined|number,unknown>
Minimum value that can be assigned to the slider
0
readonlyreadonly:InputSignalWithTransform<undefined|boolean,unknown>
If true slider value cannot be changed but the slider is still focusable
false
readonlyrtl:InputSignalWithTransform<undefined|boolean,unknown>
It true slider display is inversed
false
readonlyshowMinMaxLabels:InputSignalWithTransform<undefined|boolean,unknown>
If true the min and max labels are displayed on the slider
true
readonlyshowValueLabels:InputSignalWithTransform<undefined|boolean,unknown>
If true the value labels are displayed on the slider
true
readonlystepSize:InputSignalWithTransform<undefined|number,unknown>
Unit value between slider steps
1
readonlystructure:InputSignal<SlotContent<SliderContext>>
Slot to change the default display of the slider
readonlyvalues:InputSignal<undefined|number[]>
Current slider values
[0]
readonlyvaluesChange:OutputEmitterRef<number[]>
An event emitted when slider values are changed
Event payload equals to the updated slider values
() => {}
readonlyvertical: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
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
constsliderDefaultSlotHandle:SlotContent<SliderSlotHandleContext>
A constant representing the default slot handle for the slider component.
constsliderDefaultSlotStructure:SlotContent<SliderContext>
Represents the default slot structure 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
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 SliderSlotLabelContext.
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) => '' + valuemax:
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
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
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 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) => '' + valuemax:
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
Directive that provides structure for the slider component.
This directive uses a TemplateRef to handle the context of the slider slot.
SliderWidget:
Widget<SliderProps,SliderState,object,SliderDirectives>
Represents a slider widget component.