fix(ui5-slider): enhance storybook samples (#7460)

* fix(ui5-slider): enhance storybook samples

* fix(ui5-slider): apply review comments

Author: niyap

packages/playground/_stories/main/RangeSlider/RangeSlider.stories.ts

@@ -13,7 +13,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 const component = "ui5-range-slider";
 
 export default {
-    title: "Main/RangeSlider",
+    title: "Main/Range Slider",
     component: "RangeSlider",
     parameters: {
         docs: {
@@ -35,38 +35,54 @@ const Template: UI5StoryArgs<RangeSlider, StoryArgsSlots> = (args) => html`
 	?show-tooltip="${ifDefined(args.showTooltip)}"
 ></ui5-range-slider>`;
 
-export const BasicRangeSlider = Template.bind({});
-BasicRangeSlider.args = {
+export const Basic = Template.bind({});
+Basic.decorators = [
+	(story) => {
+		return html`
+			<div class="wrapper" style="margin-top:1rem;">
+				${story()}
+			</div>
+		`;
+	}
+]
+Basic.args = {
+	min: 0,
+	max: 100,
+	step: 5,
+	disabled: false,
+	showTooltip: false,
+	showTickmarks: false,
+	labelInterval: 0,
+	startValue: 0,
 	endValue: 20
 };
 
-export const RangeSliderCustomValues = Template.bind({});
-RangeSliderCustomValues.args = {
-	min: 100,
-	max: 200,
-	startValue: 120,
-	endValue: 150
-};
-RangeSliderCustomValues.storyName = "Range Slider with Custom 'min', 'max', 'startValue' and 'endValue' Properties";
-
-export const RangeSliderTooltip = Template.bind({});
-RangeSliderTooltip.args = {
+export const WithTooltips = Template.bind({});
+WithTooltips.decorators = [
+	(story) => {
+		return html`
+			<div class="wrapper" style="margin-top:1rem;">
+				${story()}
+			</div>
+		`;
+	}
+]
+WithTooltips.args = {
 	startValue: 3,
 	endValue: 13,
 	showTooltip: true
 };
-RangeSliderTooltip.storyName = "Range Slider with Tooltips";
-
-export const RangeSliderTickmarksCustomStep = Template.bind({});
-RangeSliderTickmarksCustomStep.args = {
-	step: 2,
-	startValue: 12,
-	endValue: 24,
-	showTickmarks: true
-};
-RangeSliderTickmarksCustomStep.storyName = "Range Slider with Tickmarks and Custom Step";
 
 export const RangeSliderTickmarksTooltipLabel = Template.bind({});
+RangeSliderTickmarksTooltipLabel.decorators = [
+	(story) => {
+		return html`
+			<div class="wrapper" style="margin-top:1rem;">
+				${story()}
+			</div>
+		`;
+	}
+]
 RangeSliderTickmarksTooltipLabel.args = {
 	min: 0,
 	max: 112,
@@ -77,4 +93,4 @@ RangeSliderTickmarksTooltipLabel.args = {
 	showTickmarks: true,
 	showTooltip: true
 };
-RangeSliderTickmarksTooltipLabel.storyName = "Range Slider with Tooltips, Tickmarks and Labels";
+RangeSliderTickmarksTooltipLabel.storyName = "With Tooltips, Tickmarks and Labels";

packages/playground/_stories/main/Slider/Slider.stories.ts

@@ -36,30 +36,53 @@ const Template: UI5StoryArgs<Slider, StoryArgsSlots> = (args) => html`
 	accessible-name="${ifDefined(args.accessibleName)}"
 ></ui5-slider>`;
 
-export const BasicSlider = Template.bind({});
+export const Basic = Template.bind({});
+Basic.decorators = [
+	(story) => {
+		return html`
+			<div class="wrapper" style="margin-top:1rem;">
+				${story()}
+			</div>
+		`;
+	}
+]
+Basic.args = {
+	min: 0,
+	max: 100,
+	step: 5,
+	disabled: false,
+	showTooltip: false,
+	showTickmarks: false,
+	labelInterval: 0
+};
 
-export const SliderTooltip = Template.bind({});
-SliderTooltip.args = {
+export const WithTooltip = Template.bind({});
+WithTooltip.decorators = [
+	(story) => {
+		return html`
+			<div class="wrapper" style="margin-top:1rem;">
+				${story()}
+			</div>
+		`;
+	}
+]
+WithTooltip.args = {
 	min: 0,
 	max: 20,
 	showTooltip: true,
 	labelInterval: 5
-
 };
-SliderTooltip.storyName = "Slider with Tooltip";
-
-export const DisabledTickmarksLabel = Template.bind({});
-DisabledTickmarksLabel.args = {
-	min: 20,
-	max: 100,
-	labelInterval: 5,
-	disabled: true,
-	showTickmarks: true
-};
-DisabledTickmarksLabel.storyName = "Disabled Slider with Tickmarks and Labels";
-
 
 export const TickmarksLabelTooltip = Template.bind({});
+TickmarksLabelTooltip.decorators = [
+	(story) => {
+		return html`
+			<div class="wrapper" style="margin-top:1rem;">
+				${story()}
+			</div>
+		`;
+	}
+]
 TickmarksLabelTooltip.args = {
 	min: -20,
 	max: 20,
@@ -69,4 +92,4 @@ TickmarksLabelTooltip.args = {
 	labelInterval: 2,
 	showTickmarks: true
 };
-TickmarksLabelTooltip.storyName = "Slider Tooltip, Tickmarks and Labels";
+TickmarksLabelTooltip.storyName = "With Tooltip, Tickmarks and Labels";