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 %
Slider(
props):Element
Slider component that integrates with a widget context and renders a slot structure.
• props: PropsWithChildren<Partial<SliderProps>>
The properties for the Slider component.
Element
The rendered Slider component.
The Slider component uses the useWidgetWithConfig hook to create a widget context with the provided
configuration. It then applies the sliderDirective to a div element and renders the slot content
using the Slot component.
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:
SliderState
the state of the widget
SliderDefaultSlotHandle(
slotContext):Element
A functional component that renders a button element with a directive applied to it.
The directive is provided through the slotContext parameter.
• slotContext: SliderSlotHandleContext
The context object containing the directives and item for the slider handle.
Element
A button element with the applied directive.
SliderDefaultSlotStructure(
slotContext):Element
Renders the default slot structure for the Slider component.
• slotContext: SliderContext
The context object containing state and directives for the slider.
Element
The JSX element representing the default slot structure.
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
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:
SliderState
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:
SliderState
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
SliderWidget:
Widget<SliderProps,SliderState,object,SliderDirectives>
Represents a slider widget component.