diff --git a/packages/website/docs/_components_pages/main/RangeSlider.mdx b/packages/website/docs/_components_pages/main/RangeSlider.mdx index 74541900fa98..3f6f24d3ffed 100644 --- 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. + +### 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. + + diff --git a/packages/website/docs/_components_pages/main/Slider.mdx b/packages/website/docs/_components_pages/main/Slider.mdx index 3181f176204c..b3a60e5ba497 100644 --- 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. +### 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. + + + diff --git a/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/CustomTickmarks.md b/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/CustomTickmarks.md new file mode 100644 index 000000000000..0c062a836e84 --- /dev/null +++ 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'; + + diff --git a/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/main.js b/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/main.js new file mode 100644 index 000000000000..97a4a9766b83 --- /dev/null +++ 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 new file mode 100644 index 000000000000..b6b612fbb6d3 --- /dev/null +++ b/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/sample.html @@ -0,0 +1,19 @@ + + + + + + + + Sample + + + + + + + + + + + diff --git a/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/sample.tsx b/packages/website/docs/_samples/main/RangeSlider/CustomTickmarks/sample.tsx new file mode 100644 index 000000000000..1b90f1d98fb7 --- /dev/null +++ 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 ( + <> + + + ); +} + +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 new file mode 100644 index 000000000000..0c062a836e84 --- /dev/null +++ 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'; + + diff --git a/packages/website/docs/_samples/main/Slider/CustomTickmarks/main.js b/packages/website/docs/_samples/main/Slider/CustomTickmarks/main.js new file mode 100644 index 000000000000..12c7742826ea --- /dev/null +++ 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 new file mode 100644 index 000000000000..1694ef0a789c --- /dev/null +++ b/packages/website/docs/_samples/main/Slider/CustomTickmarks/sample.html @@ -0,0 +1,19 @@ + + + + + + + + Sample + + + + + + + + + + + diff --git a/packages/website/docs/_samples/main/Slider/CustomTickmarks/sample.tsx b/packages/website/docs/_samples/main/Slider/CustomTickmarks/sample.tsx new file mode 100644 index 000000000000..480c20be8c3f --- /dev/null +++ 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 ( + <> + + + ); +} + +export default App;