createSlider(
config?):SliderWidget
Create a slider widget with given config props
an optional slider config
a SliderWidget
getSliderDefaultConfig():
SliderProps
Returns a shallow copy of the default slider config.
a copy of the default 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 %
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
Interface representing 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
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
showValueLabels:
boolean
If true the value labels are displayed on the slider
true
stepSize:
number
Unit value between slider steps
1
values:
number[]
Current slider values
[0]
vertical:
boolean
If true is vertically positioned otherwise it is horizontal
false
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
handleDisplayOptions:
HandleDisplayOptions[]
Array of objects representing handle display options
interactive:
boolean
Check if the slider is interactive, meaning it is not disabled or readonly
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
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
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.