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
• props?: PropsConfig<SliderProps>
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 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 %
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.
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) => '' + valueariaValueText:
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) => '' + valueclassName:
undefined|string
CSS classes to be applied on the widget main container
''
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) => '' + valuemax:
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
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
getapi():W["api"]
Retrieves the widget api
W["api"]
the widget api
getdirectives():W["directives"]
Retrieves the widget directives
W["directives"]
the widget directives
getstate():AngularState<W>
Retrieves the widget state as 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
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<object>
Directive to apply to the slider handle if any
item:
SliderHandle
handleEventsDirective:
Directive<object>
Directive to apply handle events handlers
item:
object
id:
number
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
Represents a handle in a slider component.
ariaLabel:
string
ariaLabel of the handle
ariaValueText:
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.
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) => '' + valueariaValueText: (
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) => '' + valueclassName:
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
• 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
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
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.