Slider

v1.0.0-rc.11
@ui5/webcomponents
<ui5-slider>

Basic Slider

<ui5-slider></ui5-slider>
	

Slider with Tooltip

<ui5-slider min="0" max="20" show-tooltip></ui5-slider>
	

Disabled Slider with Tickmarks and Labels

<ui5-slider min="20" max="100" label-interval="5" disabled show-tickmarks></ui5-slider>
	

Slider Tooltip, Tickmarks and Labels

<ui5-slider min="-20" max="20" step="2" value="12" show-tooltip label-interval="2" show-tickmarks></ui5-slider>
	

Overview

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.

Structure

The most important properties of the Slider are:
  • min - The minimum value of the slider range
  • max - The maximum value of the slider range
  • value - The current value of the slider
  • step - Determines the increments in which the slider will move
  • showTooltip - Determines if a tooltip should be displayed above the handle
  • showTickmarks - Displays a visual divider between the step values
  • labelInterval - Labels some or all of the tickmarks with their values.

Usage

The most common usecase is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).

Responsive Behavior

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 to the desired value
  • Click/tap on the range bar to move the handle to that location

ES6 Module Import

import "@ui5/webcomponents/dist/Slider";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
value
Float
0
Current value of the slider
disabled
boolean
false
Defines whether the slider is in disabled state.
labelInterval
label-interval
Integer
0
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.
max
Float
100
Defines the maximum value of the slider
min
Float
0
Defines the minimum value of the slider
showTickmarks
show-tickmarks
boolean
false
Enables tick marks visualization for each step.

Note: The step must be a positive number.
showTooltip
show-tooltip
boolean
false
Enables handle tooltip displaying the current value.
step
Integer
1
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. When negative number or value other than a number, the component fallbacks to its default value.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
change
Fired when the value changes and the user has finished interacting with the slider.
input
Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel