The Slider component represents a numerical range and a handle (grip).
The purpose of the component is to enable visual selection of a value in
a continuous numerical range by moving an adjustable handle.
The ui5-slider component adjusts to the size of its parent container by recalculating and
resizing the width of the control. You can move the slider handle in several different ways:
Drag and drop the handle to the desired value.
Click/tap on the range bar to move the handle to that location.
Left or Down Arrow - Moves the handle one step to the left, effectively decreasing the component's value by step amount;
Right or Up Arrow - Moves the handle one step to the right, effectively increasing the component's value by step amount;
Left or Down Arrow + Ctrl/Cmd - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;
Right or Up Arrow + Ctrl/Cmd - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;
Plus - Same as Right or Up Arrow;
Minus - Same as Left or Down Arrow;
Home - Moves the handle to the beginning of the range;
End - Moves the handle to the end of the range;
Page Up - Same as Right or Up + Ctrl/Cmd;
Page Down - Same as Left or Down + Ctrl/Cmd;
Escape - Resets the value property after interaction, to the position prior the component's focusing;
Indicates whether input fields should be used as tooltips for the handles. Note: Setting this option to true will only work if showTooltip is set to true. Note: In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.
Displays a label with a value on every N-th step. Note: The step and tickmarks properties must be enabled. Example - if the step value is set to 2 and the label interval is also specified to 2 - then every second tickmark will be labelled, which means every 4th value number. Note: This property is ignored when the tickmarks property is used. In that case every custom tickmark is labelled with its own label.
Determines the name by which the component will be identified upon submission in an HTML form. Note: This property is only applicable within the context of an HTML Form element.
Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10). Note: If set to 0 the slider handle movement is disabled.
Defines custom tickmarks with labels on the slider scale. Each tickmark object has a numeric value and an optional label string. Tickmarks are purely visual — they display labeled markers at specific positions but do not affect the slider's movement behavior. The slider still moves according to min, max, and step. When the current value matches a tickmark value, the tickmark's label is shown in the tooltip and announced via aria-valuetext. Note: When tickmarks is provided, the scale is automatically shown (equivalent to showTickmarks), and labelInterval is ignored - every custom tickmark is rendered with its own label.