Slider

an optional slider config

a SliderWidget

SliderProps

a copy of the default 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 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 %

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

containerDirective: Directive

Directive to apply to the slider container wrapping the slider content

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

tickDirective: Directive<{ tick: SliderTick; }>

Directive to apply to the slider tick

tickLabelDirective: Directive<{ tick: SliderTick; }>

Directive to apply to the slider tick label

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

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

maxRange: number

Maximum distance between two values When set to 0, no maximum distance constraint is applied.

0

min: number

Minimum value that can be assigned to the slider

0

minRange: number

Minimum distance between two values. When set to 0, no minimum distance constraint is applied.

0

onValuesChange: (values) => void

An event emitted when slider values are changed

Event payload equals to the updated slider values

number[]

void

() => {}

pushRange: boolean

When true, if moving a value would break the minRange or maxRange constraint, it will instead push or pull the neighboring values to keep the allowed range rather than just stopping.

false

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

showTicks: boolean

If true the ticks are displayed on the slider

false

showTickValues: boolean

If true the tick values 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

tickInterval: number

Unit value between the ticks If value is set to 0 the stepSize is used to space the ticks

0

values: number[]

Current slider values

[0]

vertical: boolean

If true is vertically positioned otherwise it is horizontal

false

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

showTicks: boolean

If true the ticks are displayed on the slider

false

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

ticks: SliderTick[]

Array of ticks to display on the slider component

values: number[]

Current slider values

[0]

vertical: boolean

If true is vertically positioned otherwise it is horizontal

false

optional className: null | string

CSS classes to be applied on the tick

displayLabel: boolean

If true the tick label is displayed

optional legend: null | string

Visualized optional explanation of the label

position: number

Position of the tick in percent

selected: boolean

If true the tick has selected style

value: number

Value of the tick