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 %
Slider(
props):Element
Slider component that integrates with a widget context and renders a slot structure.
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.
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.
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<{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
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:
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.