UI5 · niyap · Jun 10, 2026
diff --git a/packages/website/docs/_components_pages/main/RangeSlider.mdx b/packages/website/docs/_components_pages/main/RangeSlider.mdx
@@ -5,6 +5,7 @@ slug: ../RangeSlider
 import Basic from "../../_samples/main/RangeSlider/Basic/Basic.md";
 import ShowTickmarks from "../../_samples/main/RangeSlider/ShowTickmarks/ShowTickmarks.md";
 import ShowTooltip from "../../_samples/main/RangeSlider/ShowTooltip/ShowTooltip.md";
+import CustomTickmarks from "../../_samples/main/RangeSlider/CustomTickmarks/CustomTickmarks.md";
 
 <%COMPONENT_OVERVIEW%>
 
@@ -24,3 +25,8 @@ Tickmarks, marking the step can be displayed on the Range Slider. In addition, l
 Tooltip with the current value can be displayed upon handles hover.
 
 <ShowTooltip />
+
+### Custom Tickmarks
+Custom tickmarks with labels can be displayed at specific positions on the Range Slider scale. When a handle's current value matches a tickmark value, the tickmark's label is shown in the tooltip.
+
+<CustomTickmarks />
diff --git a/packages/website/docs/_components_pages/main/Slider.mdx b/packages/website/docs/_components_pages/main/Slider.mdx
@@ -5,6 +5,7 @@ slug: ../Slider
 import Basic from "../../_samples/main/Slider/Basic/Basic.md";
 import ShowTickmarks from "../../_samples/main/Slider/ShowTickmarks/ShowTickmarks.md";
 import ShowTooltip from "../../_samples/main/Slider/ShowTooltip/ShowTooltip.md";
+import CustomTickmarks from "../../_samples/main/Slider/CustomTickmarks/CustomTickmarks.md";
 
 <%COMPONENT_OVERVIEW%>
 
@@ -25,6 +26,11 @@ Tooltip with the current value can be displayed upon handle hover.
 
 <ShowTooltip />
 
+### Custom Tickmarks
+Custom tickmarks with labels can be displayed at specific positions on the slider scale. When the current value matches a tickmark value, the tickmark's label is shown in the tooltip.
+
+<CustomTickmarks />
+
 
 
 

diff --git a/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/CustomTickmarks.md b/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/CustomTickmarks.md
@@ -0,0 +1,5 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import react from '!!raw-loader!./sample.tsx';
+
+<Editor html={html} js={js} react={react} />
diff --git a/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/main.js b/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/main.js
@@ -0,0 +1,9 @@
+import "@ui5/webcomponents/dist/RangeSlider.js";
+
+document.getElementById("custom-tickmarks-temp").tickmarks = [
+    { value: 0, label: "Freezing" },
+    { value: 25, label: "Cool" },
+    { value: 50, label: "Warm" },
+    { value: 75, label: "Hot" },
+    { value: 100, label: "Boiling" }
+];
diff --git a/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/sample.html b/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/sample.html
@@ -0,0 +1,19 @@
+<!-- playground-hide -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor);margin: 2rem 0.5rem;">
+    <!-- playground-hide-end -->
+    <ui5-range-slider id="custom-tickmarks-temp" min="0" max="100" step="5" start-value="25" end-value="75" show-tooltip></ui5-range-slider>
+    <!-- playground-hide -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-hide-end -->
diff --git a/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/sample.tsx b/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/sample.tsx
@@ -0,0 +1,30 @@
+import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
+import RangeSliderClass from "@ui5/webcomponents/dist/RangeSlider.js";
+
+const RangeSlider = createReactComponent(RangeSliderClass);
+
+const tickmarks = [
+  { value: 0, label: "Freezing" },
+  { value: 25, label: "Cool" },
+  { value: 50, label: "Warm" },
+  { value: 75, label: "Hot" },
+  { value: 100, label: "Boiling" },
+];
+
+function App() {
+  return (
+    <>
+      <RangeSlider
+        min={0}
+        max={100}
+        step={5}
+        startValue={25}
+        endValue={75}
+        showTooltip={true}
+        tickmarks={tickmarks}
+      />
+    </>
+  );
+}
+
+export default App;
diff --git a/packages/website/docs/_samples/main/Slider/CustomTickmarks/CustomTickmarks.md b/packages/website/docs/_samples/main/Slider/CustomTickmarks/CustomTickmarks.md
@@ -0,0 +1,5 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import react from '!!raw-loader!./sample.tsx';
+
+<Editor html={html} js={js} react={react} />
diff --git a/packages/website/docs/_samples/main/Slider/CustomTickmarks/main.js b/packages/website/docs/_samples/main/Slider/CustomTickmarks/main.js
@@ -0,0 +1,9 @@
+import "@ui5/webcomponents/dist/Slider.js";
+
+document.getElementById("custom-values-temp").tickmarks = [
+    { value: 0, label: "Freezing" },
+    { value: 2.5, label: "Room Temp" },
+    { value: 5, label: "Warm" },
+    { value: 7.5, label: "Hot" },
+    { value: 10, label: "Boiling" }
+];
diff --git a/packages/website/docs/_samples/main/Slider/CustomTickmarks/sample.html b/packages/website/docs/_samples/main/Slider/CustomTickmarks/sample.html
@@ -0,0 +1,19 @@
+<!-- playground-hide -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor);margin: 2rem 0.5rem;">
+    <!-- playground-hide-end -->
+    <ui5-slider id="custom-values-temp" min="0" max="10" step="0.5" value="2.5" show-tooltip></ui5-slider>
+    <!-- playground-hide -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-hide-end -->
diff --git a/packages/website/docs/_samples/main/Slider/CustomTickmarks/sample.tsx b/packages/website/docs/_samples/main/Slider/CustomTickmarks/sample.tsx
@@ -0,0 +1,29 @@
+import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
+import SliderClass from "@ui5/webcomponents/dist/Slider.js";
+
+const Slider = createReactComponent(SliderClass);
+
+const tickmarks = [
+  { value: 0, label: "Freezing" },
+  { value: 2.5, label: "Room Temp" },
+  { value: 5, label: "Warm" },
+  { value: 7.5, label: "Hot" },
+  { value: 10, label: "Boiling" },
+];
+
+function App() {
+  return (
+    <>
+      <Slider
+        min={0}
+        max={10}
+        step={0.5}
+        value={2.5}
+        showTooltip={true}
+        tickmarks={tickmarks}
+      />
+    </>
+  );
+}
+
+export default App;