Slider

• props?: PropsConfig<SliderProps>

SliderWidget

a SliderWidget

• slotContext: SliderSlotHandleContext

Element

• slotContext: SliderContext

Element

SliderProps

the default Slider config

left: null | number

Left offset of the handle in %

top: null | number

Top offset of the handle in %

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 %

• props: PropsWithChildren<Partial<SliderProps>>

Element

click(event): void

Method to handle click on the slider

• event: MouseEvent

mouse event

void

keydown(event, handleNumber): void

Method to process the keyboard event

• event: KeyboardEvent

keyboard event object

• handleNumber: number

id of the modified handle

void

mouseDown(event, handleId): void

Method describing the behavior of the slider handle on mouse down event

• event: MouseEvent

mouse event

• handleId: number

numeric id of the handle

void

touchStart(event, handleId): void

Method describing the behavior of the slider handle on touch start event

• event: TouchEvent

touch event

• handleId: number

number id of the handle

void

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

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

ariaLabel: string

ariaLabel of the handle

ariaValueText: string

ariaValueText of the handle

id: number

Handle id

value: number

Value of the handle

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) => '' + value

ariaValueText: (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) => '' + value

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) => '' + value

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

• 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

item: SliderHandle

value: number

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) => '' + value

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

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