storybook

src/Umbraco.Web.UI.Client/.storybook/preview.js

@@ -36,6 +36,7 @@ import '../libs/element/context-provider.element';
 import '../src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element';
 import '../src/backoffice/shared/components/code-block/code-block.element';
 import '../src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element';
+import '../src/backoffice/shared/components';
 
 class UmbStoryBookElement extends LitElement {
 	_umbIconStore = new UmbIconStore();

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-slider/input-slider.element.ts

@@ -38,7 +38,6 @@ export class UmbInputSliderElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	render() {
-		console.log(this.initVal1);
 		if (this.enableRange) return this.#renderRangeSlider();
 		else return this.#renderSlider();
 	}
@@ -56,7 +55,8 @@ export class UmbInputSliderElement extends FormControlMixin(UmbLitElement) {
 			.min="${this.min}"
 			.max="${this.max}"
 			.step="${this.step}"
-			.value="${this.initVal1.toString()},${this.initVal2.toString()}"
+			.valueLow="${this.initVal1}"
+			.valueHigh="${this.initVal2}"
 			@change="${this.#onChange}"></uui-range-slider>`;
 	}
 }

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/slider/property-editor-ui-slider.stories.ts

@@ -11,5 +11,9 @@ export default {
 } as Meta;
 
 export const AAAOverview: Story<UmbPropertyEditorUISliderElement> = () =>
-	html`<umb-property-editor-ui-slider></umb-property-editor-ui-slider>`;
+	html`<umb-property-editor-ui-slider
+		.config="${[
+			{ alias: 'maxVal', value: 50 },
+			{ alias: 'step', value: 5 },
+		]}"></umb-property-editor-ui-slider>`;
 AAAOverview.storyName = 'Overview';

src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts

@@ -193,7 +193,7 @@ export const data: Array<DataTypeModel & { type: 'data-type' }> = [
 			},
 			{
 				alias: 'initVal2',
-				value: 20,
+				value: 40,
 			},
 			{
 				alias: 'maxVal',