@ui5/webcomponents 0.0.0-ec448881d → 0.0.0-ee3bbe46b

package/src/Popup.js

@@ -4,8 +4,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isChrome } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { hasStyle, createStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js";
-import { isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isEnter, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
@@ -23,7 +24,7 @@ import globalStyles from "./generated/themes/PopupGlobal.css.js";
  */
 const metadata = {
 	managedSlots: true,
-	slots: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Popup.prototype */ {
 
 		/**
 		 * Defines the content of the Popup.
@@ -36,7 +37,7 @@ const metadata = {
 			propertyName: "content",
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Popup.prototype */ {
 		/**
 		 * Defines the ID of the HTML Element, which will get the initial focus.
 		 *
@@ -114,7 +115,7 @@ const metadata = {
 		 * @type {string}
 		 * @private
 		 */
-		 mediaRange: {
+		mediaRange: {
 			type: String,
 		},
 
@@ -128,14 +129,28 @@ const metadata = {
 		_blockLayerHidden: {
 			type: Boolean,
 		},
+
+		/**
+		 * Indicates if the element is the top modal popup
+		 *
+		 * This property is calculated automatically
+		 *
+		 * @private
+		 * @type {boolean}
+		 * @defaultvalue false
+		 */
+		isTopModalPopup: {
+			type: Boolean,
+			noAttribute: true,
+		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	events: /** @lends sap.ui.webc.main.Popup.prototype */ {
 
 		/**
 		 * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. <b>This event does not bubble.</b>
 		 *
 		 * @public
-		 * @event sap.ui.webcomponents.main.Popup#before-open
+		 * @event sap.ui.webc.main.Popup#before-open
 		 * @allowPreventDefault
 		 */
 		"before-open": {},
@@ -144,7 +159,7 @@ const metadata = {
 		 * Fired after the component is opened. <b>This event does not bubble.</b>
 		 *
 		 * @public
-		 * @event sap.ui.webcomponents.main.Popup#after-open
+		 * @event sap.ui.webc.main.Popup#after-open
 		 */
 		"after-open": {},
 
@@ -152,7 +167,7 @@ const metadata = {
 		 * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. <b>This event does not bubble.</b>
 		 *
 		 * @public
-		 * @event sap.ui.webcomponents.main.Popup#before-close
+		 * @event sap.ui.webc.main.Popup#before-close
 		 * @allowPreventDefault
 		 * @param {boolean} escPressed Indicates that <code>ESC</code> key has triggered the event.
 		 */
@@ -166,7 +181,7 @@ const metadata = {
 		 * Fired after the component is closed. <b>This event does not bubble.</b>
 		 *
 		 * @public
-		 * @event sap.ui.webcomponents.main.Popup#after-close
+		 * @event sap.ui.webc.main.Popup#after-close
 		 */
 		"after-close": {},
 
@@ -174,7 +189,7 @@ const metadata = {
 		 * Fired whenever the popup content area is scrolled
 		 *
 		 * @private
-		 * @event sap.ui.webcomponents.main.Popup#scroll
+		 * @event sap.ui.webc.main.Popup#scroll
 		 */
 		"scroll": {},
 	},
@@ -219,8 +234,8 @@ const pageScrollingBlockers = new Set();
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Popup
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Popup
+ * @extends sap.ui.webc.base.UI5Element
  * @public
  */
 class Popup extends UI5Element {
@@ -254,11 +269,11 @@ class Popup extends UI5Element {
 		return staticAreaStyles;
 	}
 
-	onEnterDOM() {
-		if (!this.isOpen()) {
-			this._blockLayerHidden = true;
-		}
+	onBeforeRendering() {
+		this._blockLayerHidden = !this.isOpen() || !this.isTopModalPopup;
+	}
 
+	onEnterDOM() {
 		ResizeHandler.register(this, this._resizeHandler);
 	}
 
@@ -322,7 +337,11 @@ class Popup extends UI5Element {
 	}
 
 	_onkeydown(e) {
-		if (e.target === this._root && isTabPrevious(e)) {
+		const isTabOutAttempt = e.target === this._root && isTabPrevious(e);
+		// if the popup is closed, focus is already moved, so Enter keydown may result in click on the newly focused element
+		const isEnterOnClosedPopupChild = isEnter(e) && !this.isOpen();
+
+		if (isTabOutAttempt || isEnterOnClosedPopupChild) {
 			e.preventDefault();
 		}
 	}
@@ -347,6 +366,7 @@ class Popup extends UI5Element {
 
 	_onmouseup() {
 		this._root.tabIndex = -1;
+
 		if (this._shouldFocusRoot) {
 			if (isChrome()) {
 				this._root.focus();
@@ -363,7 +383,7 @@ class Popup extends UI5Element {
 		const firstFocusable = await getFirstFocusableElement(this);
 
 		if (firstFocusable) {
-			firstFocusable.focus();
+			firstFocusable.focus({ focusVisible: true });
 		} else {
 			this._root.focus();
 		}
@@ -377,7 +397,7 @@ class Popup extends UI5Element {
 		const lastFocusable = await getLastFocusableElement(this);
 
 		if (lastFocusable) {
-			lastFocusable.focus();
+			lastFocusable.focus({ focusVisible: true });
 		} else {
 			this._root.focus();
 		}
@@ -410,7 +430,7 @@ class Popup extends UI5Element {
 			if (element === this._root) {
 				element.tabIndex = -1;
 			}
-			element.focus();
+			element.focus({ focusVisible: true });
 		}
 	}
 
@@ -424,7 +444,7 @@ class Popup extends UI5Element {
 	}
 
 	isFocusWithin() {
-		return isFocusedElementWithinNode(this.shadowRoot.querySelector(".ui5-popup-root"));
+		return isFocusedElementWithinNode(this._root);
 	}
 
 	/**
@@ -446,6 +466,7 @@ class Popup extends UI5Element {
 
 		this._zIndex = getNextZIndex();
 		this.style.zIndex = this._zIndex;
+
 		this._focusedElementBeforeOpen = getFocusedElement();
 
 		this._show();
@@ -522,7 +543,7 @@ class Popup extends UI5Element {
 			return;
 		}
 
-		this._focusedElementBeforeOpen.focus();
+		this._focusedElementBeforeOpen.focus({ focusVisible: true });
 		this._focusedElementBeforeOpen = null;
 	}
 
@@ -591,6 +612,10 @@ class Popup extends UI5Element {
 		return this.shadowRoot.querySelector(".ui5-popup-root");
 	}
 
+	get _role() {
+		return "dialog";
+	}
+
 	get contentDOM() {
 		return this.shadowRoot.querySelector(".ui5-popup-content");
 	}
@@ -609,6 +634,7 @@ class Popup extends UI5Element {
 		return {
 			root: {
 				"ui5-popup-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
 			},
 			content: {
 				"ui5-popup-content": true,

package/src/{ProgressIndicator.js → ProgressIndicator.ts}

@@ -1,105 +1,29 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Icon from "./Icon.js";
-import ProgressIndicatorTemplate from "./generated/templates/ProgressIndicatorTemplate.lit.js";
 import {
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
 	VALUE_STATE_SUCCESS,
 	VALUE_STATE_INFORMATION,
+// @ts-ignore
 } from "./generated/i18n/i18n-defaults.js";
 
+// Template
+import ProgressIndicatorTemplate from "./generated/templates/ProgressIndicatorTemplate.lit.js";
+
 // Styles
 import ProgressIndicatorCss from "./generated/themes/ProgressIndicator.css.js";
 
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-progress-indicator",
-	properties: /** @lends sap.ui.webcomponents.main.ProgressIndicator.prototype */ {
-		/**
-		 * Defines whether component is in disabled state.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		disabled: {
-			type: Boolean,
-		},
-		/**
-		 * Defines whether the component value is shown.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		hideValue: {
-			type: Boolean,
-		},
-		/**
-		 * Specifies the numerical value in percent for the length of the component.
-		 *
-		 * <b>Note:</b>
-		 * If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.
-		 * @type {Integer}
-		 * @defaultvalue 0
-		 * @public
-		 */
-		value: {
-			type: Integer,
-			defaultValue: 0,
-		},
-		/**
-		 * Specifies the text value to be displayed in the bar.
-		 *
-		 * <b>Note:</b>
-		 * <ul>
-		 * <li>If there is no value provided or the value is empty, the default percentage value is shown.</li>
-		 * <li>If <code>hideValue</code> property is <code>true</code> both the <code>displayValue</code> and <code>value</code> property values are not shown.</li>
-		 * </ul>
-		 *
-		 * @type {string}
-		 * @public
-		 */
-		displayValue: {
-			type: String,
-		},
-		/**
-		 * Defines the value state of the component.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>None</code></li>
-		 * <li><code>Error</code></li>
-		 * <li><code>Warning</code></li>
-		 * <li><code>Success</code></li>
-		 * <li><code>Information</code></li>
-		 * </ul>
-		 *
-		 * @type {ValueState}
-		 * @defaultvalue "None"
-		 * @public
-		 */
-		valueState: {
-			type: ValueState,
-			defaultValue: ValueState.None,
-		},
-	},
-	slots: /** @lends sap.ui.webcomponents.main.ProgressIndicator.prototype */ {
-		//
-	},
-	events: /** @lends sap.ui.webcomponents.main.ProgressIndicator.prototype */ {
-		//
-	},
-};
-
 /**
  * @class
  *
@@ -116,16 +40,88 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.ProgressIndicator
- * @extends UI5Element
+ * @alias sap.ui.webc.main.ProgressIndicator
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-progress-indicator
  * @public
  * @since 1.0.0-rc.8
  */
+@customElement("ui5-progress-indicator")
 class ProgressIndicator extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
+	/**
+	 * Defines whether component is in disabled state.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.ProgressIndicator.prototype.disabled
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	disabled!: boolean;
+
+	/**
+	 * Defines whether the component value is shown.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.ProgressIndicator.prototype.hideValue
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	hideValue!: boolean;
+
+	/**
+	 * Specifies the numerical value in percent for the length of the component.
+	 *
+	 * <b>Note:</b>
+	 * If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.
+	 * @type {sap.ui.webc.base.types.Integer}
+	 * @name sap.ui.webc.main.ProgressIndicator.prototype.value
+	 * @defaultvalue 0
+	 * @public
+	 */
+	@property({ validator: Integer, defaultValue: 0 })
+	value!: number;
+
+	/**
+	 * Specifies the text value to be displayed in the bar.
+	 *
+	 * <b>Note:</b>
+	 * <ul>
+	 * <li>If there is no value provided or the value is empty, the default percentage value is shown.</li>
+	 * <li>If <code>hideValue</code> property is <code>true</code> both the <code>displayValue</code> and <code>value</code> property values are not shown.</li>
+	 * </ul>
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.ProgressIndicator.prototype.displayValue
+	 * @public
+	 */
+	@property()
+	displayValue!: string;
+
+	/**
+	 * Defines the value state of the component.
+	 * <br><br>
+	 * Available options are:
+	 * <ul>
+	 * <li><code>None</code></li>
+	 * <li><code>Error</code></li>
+	 * <li><code>Warning</code></li>
+	 * <li><code>Success</code></li>
+	 * <li><code>Information</code></li>
+	 * </ul>
+	 *
+	 * @type {sap.ui.webc.base.types.ValueState}
+	 * @name sap.ui.webc.main.ProgressIndicator.prototype.valueState
+	 * @defaultvalue "None"
+	 * @public
+	 */
+	@property({ type: ValueState, defaultValue: ValueState.None })
+	valueState!: ValueState;
+
+	static i18nBundle: I18nBundle;
+	_previousValue: number;
+	_transitionDuration: number;
 
 	static get render() {
 		return litRender;
@@ -155,16 +151,16 @@ class ProgressIndicator extends UI5Element {
 		this._previousValue = this.validatedValue;
 	}
 
-	valueStateTextMappings() {
+	valueStateTextMappings(): Record<string, string> {
 		return {
-			"Error": ProgressIndicator.i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": ProgressIndicator.i18nBundle.getText(VALUE_STATE_WARNING),
-			"Success": ProgressIndicator.i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Information": ProgressIndicator.i18nBundle.getText(VALUE_STATE_INFORMATION),
+			"Error": ProgressIndicator.i18nBundle.getText(VALUE_STATE_ERROR as I18nText),
+			"Warning": ProgressIndicator.i18nBundle.getText(VALUE_STATE_WARNING as I18nText),
+			"Success": ProgressIndicator.i18nBundle.getText(VALUE_STATE_SUCCESS as I18nText),
+			"Information": ProgressIndicator.i18nBundle.getText(VALUE_STATE_INFORMATION as I18nText),
 		};
 	}
 
-	valueStateIconMappings() {
+	valueStateIconMappings(): Record<string, string> {
 		return {
 			"Error": "status-negative",
 			"Warning": "status-critical",

package/src/RadioButton.hbs

@@ -1,10 +1,9 @@
 <div class="ui5-radio-root {{classes.main}}"
 	role="radio"
 	aria-checked="{{checked}}"
-	aria-readonly="{{ariaReadonly}}"
 	aria-disabled="{{ariaDisabled}}"
-	aria-label="{{ariaLabelText}}"
 	aria-describedby="{{ariaDescribedBy}}"
+	aria-label="{{ariaLabelText}}"
 	tabindex="{{tabIndex}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
@@ -19,7 +18,7 @@
 			<circle class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
 			<circle class="ui5-radio-svg-inner" cx="50%" cy="50%" />
 		</svg>
- 		<input type='radio' ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}" data-sap-no-tab-ref/>
+		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{ariaDisabled}}" name="{{name}}"  data-sap-no-tab-ref/>
 	</div>
 
 	{{#if text}}
@@ -29,4 +28,5 @@
 	{{#if hasValueState}}
 		<span id="{{_id}}-descr" class="ui5-hidden-text">{{valueStateText}}</span>
 	{{/if}}
+	<slot name="formSupport"></slot>
 </div>

package/src/RadioButton.js

@@ -39,9 +39,8 @@ let activeRadio = null;
  */
 const metadata = {
 	tag: "ui5-radio-button",
-	altTag: "ui5-radiobutton",
 	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
+	properties: /** @lends sap.ui.webc.main.RadioButton.prototype */ {
 
 		/**
 		 * Defines whether the component is disabled.
@@ -70,6 +69,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines whether the component is required.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.9.0
+		 */
+		required: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines whether the component is checked or not.
 		 * <br><br>
@@ -79,6 +90,8 @@ const metadata = {
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
+		 * @formEvents change
+		 * @formProperty
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -109,7 +122,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -172,7 +185,7 @@ const metadata = {
 		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
 		 * </ul>
 		 *
-		 * @type {WrappingType}
+		 * @type {sap.ui.webc.main.types.WrappingType}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -182,12 +195,12 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.16
+		 * @public
+		 * @since 1.6.0
 		 */
 		accessibleName: {
 			type: String,
@@ -219,7 +232,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
+	slots: /** @lends sap.ui.webc.main.RadioButton.prototype */ {
 		/**
 		 * The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit,
 		 * when <code>name</code> property is set.
@@ -231,7 +244,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
+	events: /** @lends sap.ui.webc.main.RadioButton.prototype */ {
 
 		/**
 		 * Fired when the component checked state changes.
@@ -272,8 +285,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.RadioButton
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.RadioButton
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-radio-button
  * @public
  */
@@ -323,12 +336,20 @@ class RadioButton extends UI5Element {
 		this._enableFormSupport();
 	}
 
-	syncGroup() {
+	onExitDOM() {
+		this.syncGroup(true);
+	}
+
+	syncGroup(forceRemove) {
 		const oldGroup = this._name;
 		const currentGroup = this.name;
 		const oldChecked = this._checked;
 		const currentChecked = this.checked;
 
+		if (forceRemove) {
+			RadioButtonGroup.removeFromGroup(this, oldGroup);
+		}
+
 		if (currentGroup !== oldGroup) {
 			if (oldGroup) {
 				// remove the control from the previous group
@@ -355,8 +376,9 @@ class RadioButton extends UI5Element {
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-				nativeInput.disabled = element.disabled || !element.checked;
-				nativeInput.value = element.checked ? element.value : "";
+				nativeInput.value = element.value;
+				nativeInput.type = "radio";
+				nativeInput.checked = element.checked;
 			});
 		} else if (this.value) {
 			console.warn(`In order for the "value" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
@@ -400,11 +422,13 @@ class RadioButton extends UI5Element {
 			return this.toggle();
 		}
 
-		if (isDown(event) || isRight(event)) {
+		const isRTL = this.effectiveDir === "rtl";
+
+		if (isDown(event) || (!isRTL && isRight(event)) || (isRTL && isLeft(event))) {
 			this._handleDown(event);
 		}
 
-		if (isUp(event) || isLeft(event)) {
+		if (isUp(event) || (!isRTL && isLeft(event)) || (isRTL && isRight(event))) {
 			this._handleUp(event);
 		}
 	}
@@ -467,10 +491,6 @@ class RadioButton extends UI5Element {
 		};
 	}
 
-	get ariaReadonly() {
-		return this.readonly ? "true" : undefined;
-	}
-
 	get ariaDisabled() {
 		return this.disabled ? "true" : undefined;
 	}

package/src/RadioButtonGroup.js

@@ -128,7 +128,7 @@ class RadioButtonGroup {
 
 	static _selectRadio(radioBtn) {
 		if (radioBtn) {
-			radioBtn.focus();
+			radioBtn.focus({ focusVisible: true });
 			radioBtn.checked = true;
 			radioBtn._checked = true;
 			radioBtn.fireEvent("change");

package/src/RangeSlider.hbs

@@ -37,7 +37,7 @@
 		aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
-		<ui5-icon name="source-code" slider-icon></ui5-icon>
+		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
 
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
@@ -59,7 +59,7 @@
 		aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
-		<ui5-icon name="source-code" slider-icon></ui5-icon>
+		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
 
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">