@spectrum-web-components/slider 0.14.0-devmode.0 → 0.14.0

package/stories/slider.stories.js

@@ -1,210 +1,82 @@
-import { html } from "@spectrum-web-components/base";
-import "@spectrum-web-components/slider/sp-slider.js";
-import "@spectrum-web-components/slider/sp-slider-handle.js";
-import {
-  variants
-} from "@spectrum-web-components/slider";
-import { spreadProps } from "../../../test/lit-helpers.js";
-export default {
-  component: "sp-slider",
-  title: "Slider",
-  argTypes: {
-    onInput: { action: "input" },
-    onChange: { action: "change" },
-    variant: {
-      name: "Variant",
-      description: "Determines the style of slider.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: void 0 }
-      },
-      control: {
-        type: "inline-radio",
-        options: [void 0, ...variants]
-      }
-    },
-    tickStep: {
-      name: "Tick Step",
-      description: "Tick spacing on slider.",
-      table: {
-        type: { summary: "number" },
-        defaultValue: { summary: 0.1 }
-      },
-      control: {
-        type: "number"
-      }
-    },
-    labelVisibility: {
-      name: "Label Visibility",
-      description: "The labels visibily available in the UI",
-      table: {
-        type: { summary: '"text" | "value" | "none" | undefined' },
-        defaultValue: { summary: void 0 }
-      },
-      control: {
-        type: "text"
-      }
-    }
-  },
-  args: {
-    variant: void 0,
-    tickStep: 0.1,
-    labelVisibility: void 0
-  }
-};
-const handleEvent = ({ onInput, onChange }) => (event) => {
-  const { value } = event.target;
-  if (onInput && event.type === "input") {
-    onInput(value.toString());
-  } else if (onChange && event.type === "change") {
-    onChange(value.toString());
-  }
-};
-const handleHandleEvent = ({ onInput, onChange }) => (event) => {
-  const target = event.target;
-  if (target.value != null) {
-    if (typeof target.value === "object") {
-      const value = JSON.stringify(target.value, null, 2);
-      if (onInput && event.type === "input") {
-        onInput(value);
-      } else if (onChange && event.type === "change") {
-        onChange(value);
-      }
-    } else {
-      const value = `${target.name}: ${target.value}`;
-      if (onInput && event.type === "input") {
-        onInput(value);
-      } else if (onChange && event.type === "change") {
-        onChange(value);
-      }
-    }
-  }
-};
-export const Default = (args = {}) => {
-  return html`
+import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-components/slider/sp-slider.js";import"@spectrum-web-components/slider/sp-slider-handle.js";import{variants as y}from"@spectrum-web-components/slider";import{spreadProps as t}from"../../../test/lit-helpers.js";export default{component:"sp-slider",title:"Slider",argTypes:{onInput:{action:"input"},onChange:{action:"change"},variant:{name:"Variant",description:"Determines the style of slider.",table:{type:{summary:"string"},defaultValue:{summary:void 0}},control:{type:"inline-radio",options:[void 0,...y]}},tickStep:{name:"Tick Step",description:"Tick spacing on slider.",table:{type:{summary:"number"},defaultValue:{summary:.1}},control:{type:"number"}},labelVisibility:{name:"Label Visibility",description:"The labels visibily available in the UI",table:{type:{summary:'"text" | "value" | "none" | undefined'},defaultValue:{summary:void 0}},control:{type:"text"}}},args:{variant:void 0,tickStep:.1,labelVisibility:void 0}};const s=({onInput:e,onChange:l})=>r=>{const{value:d}=r.target;e&&r.type==="input"?e(d.toString()):l&&r.type==="change"&&l(d.toString())},o=({onInput:e,onChange:l})=>r=>{const d=r.target;if(d.value!=null)if(typeof d.value=="object"){const u=JSON.stringify(d.value,null,2);e&&r.type==="input"?e(u):l&&r.type==="change"&&l(u)}else{const u=`${d.name}: ${d.value}`;e&&r.type==="input"?e(u):l&&r.type==="change"&&l(u)}};export const Default=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="1"
                 min="0"
                 value=".5"
                 step="0.01"
-                @input=${handleEvent(args)}
-                @change=${handleEvent(args)}
-                .formatOptions=${{ style: "percent" }}
-                ...=${spreadProps(args)}
+                @input=${s(e)}
+                @change=${s(e)}
+                .formatOptions=${{style:"percent"}}
+                ...=${t(e)}
             >
                 Opacity
             </sp-slider>
         </div>
-    `;
-};
-export const noVisibleTextLabel = (args = {}) => {
-  return html`
+    `,noVisibleTextLabel=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="1"
                 min="0"
                 value=".5"
                 step="0.01"
-                @input=${handleEvent(args)}
-                @change=${handleEvent(args)}
-                .formatOptions=${{ style: "percent" }}
-                ...=${spreadProps(args)}
+                @input=${s(e)}
+                @change=${s(e)}
+                .formatOptions=${{style:"percent"}}
+                ...=${t(e)}
             >
                 Opacity
             </sp-slider>
         </div>
-    `;
-};
-noVisibleTextLabel.args = {
-  labelVisibility: "value"
-};
-export const noVisibleValueLabel = (args = {}) => {
-  return html`
+    `;noVisibleTextLabel.args={labelVisibility:"value"};export const noVisibleValueLabel=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="1"
                 min="0"
                 value=".5"
                 step="0.01"
-                @input=${handleEvent(args)}
-                @change=${handleEvent(args)}
-                .formatOptions=${{ style: "percent" }}
-                ...=${spreadProps(args)}
+                @input=${s(e)}
+                @change=${s(e)}
+                .formatOptions=${{style:"percent"}}
+                ...=${t(e)}
             >
                 Opacity
             </sp-slider>
         </div>
-    `;
-};
-noVisibleValueLabel.args = {
-  labelVisibility: "text"
-};
-export const noVisibleLabels = (args = {}) => {
-  return html`
+    `;noVisibleValueLabel.args={labelVisibility:"text"};export const noVisibleLabels=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="1"
                 min="0"
                 value=".5"
                 step="0.01"
-                @input=${handleEvent(args)}
-                @change=${handleEvent(args)}
-                .formatOptions=${{ style: "percent" }}
-                ...=${spreadProps(args)}
+                @input=${s(e)}
+                @change=${s(e)}
+                .formatOptions=${{style:"percent"}}
+                ...=${t(e)}
             >
                 Opacity
             </sp-slider>
         </div>
-    `;
-};
-noVisibleLabels.args = {
-  labelVisibility: "none"
-};
-export const px = (args = {}) => {
-  return html`
+    `;noVisibleLabels.args={labelVisibility:"none"};export const px=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="360"
                 min="0"
                 value="90"
                 step="1"
-                @input=${handleEvent(args)}
-                @change=${handleEvent(args)}
-                .formatOptions=${{
-    style: "unit",
-    unit: "px"
-  }}
-                ...=${spreadProps(args)}
+                @input=${s(e)}
+                @change=${s(e)}
+                .formatOptions=${{style:"unit",unit:"px"}}
+                ...=${t(e)}
             >
                 Angle
             </sp-slider>
         </div>
-    `;
-};
-class NumberFieldDefined extends HTMLElement {
-  constructor() {
-    super();
-    this.numberFieldLoaderPromise = Promise.resolve(false);
-    this.numberFieldLoaderPromise = new Promise((res) => {
-      customElements.whenDefined("sp-number-field").then(() => {
-        res(true);
-      });
-    });
-  }
-  get updateComplete() {
-    return this.numberFieldLoaderPromise;
-  }
-}
-customElements.define("number-field-defined", NumberFieldDefined);
-const editableDecorator = (story) => {
-  return html`
-        ${story()}
+    `;class $ extends HTMLElement{constructor(){super();this.numberFieldLoaderPromise=Promise.resolve(!1);this.numberFieldLoaderPromise=new Promise(l=>{customElements.whenDefined("sp-number-field").then(()=>{l(!0)})})}get updateComplete(){return this.numberFieldLoaderPromise}}customElements.define("number-field-defined",$);const x=e=>i`
+        ${e()}
         <number-field-defined></number-field-defined>
-    `;
-};
-export const editable = (args = {}) => {
-  return html`
+    `;export const editable=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 editable
@@ -212,23 +84,15 @@ export const editable = (args = {}) => {
                 min="0"
                 value="90"
                 step="1"
-                @input=${handleEvent(args)}
-                @change=${handleEvent(args)}
-                .formatOptions=${{
-    style: "unit",
-    unit: "degree",
-    unitDisplay: "narrow"
-  }}
-                ...=${spreadProps(args)}
+                @input=${s(e)}
+                @change=${s(e)}
+                .formatOptions=${{style:"unit",unit:"degree",unitDisplay:"narrow"}}
+                ...=${t(e)}
             >
                 Angle
             </sp-slider>
         </div>
-    `;
-};
-editable.decorators = [editableDecorator];
-export const editableDisabled = (args = {}) => {
-  return html`
+    `;editable.decorators=[x];export const editableDisabled=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 editable
@@ -237,23 +101,15 @@ export const editableDisabled = (args = {}) => {
                 min="0"
                 value="90"
                 step="1"
-                @input=${handleEvent(args)}
-                @change=${handleEvent(args)}
-                .formatOptions=${{
-    style: "unit",
-    unit: "degree",
-    unitDisplay: "narrow"
-  }}
-                ...=${spreadProps(args)}
+                @input=${s(e)}
+                @change=${s(e)}
+                .formatOptions=${{style:"unit",unit:"degree",unitDisplay:"narrow"}}
+                ...=${t(e)}
             >
                 Angle
             </sp-slider>
         </div>
-    `;
-};
-editable.decorators = [editableDecorator];
-export const editableCustom = (args = {}) => {
-  return html`
+    `;editable.decorators=[x];export const editableCustom=(e={})=>i`
         <div
             style="width: 500px; margin: 12px 20px; --spectrum-slider-editable-number-field-width: 150px;"
         >
@@ -263,19 +119,15 @@ export const editableCustom = (args = {}) => {
                 min="0"
                 value="12.75"
                 step="0.25"
-                @input=${handleEvent(args)}
-                @change=${handleEvent(args)}
-                .formatOptions=${{ style: "unit", unit: "hour" }}
-                ...=${spreadProps(args)}
+                @input=${s(e)}
+                @change=${s(e)}
+                .formatOptions=${{style:"unit",unit:"hour"}}
+                ...=${t(e)}
             >
                 Hours
             </sp-slider>
         </div>
-    `;
-};
-editableCustom.decorators = [editableDecorator];
-export const hideStepper = (args = {}) => {
-  return html`
+    `;editableCustom.decorators=[x];export const hideStepper=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 editable
@@ -284,19 +136,15 @@ export const hideStepper = (args = {}) => {
                 min="0"
                 value=".5"
                 step="0.01"
-                @input=${handleEvent(args)}
-                @change=${handleEvent(args)}
-                .formatOptions=${{ style: "percent" }}
-                ...=${spreadProps(args)}
+                @input=${s(e)}
+                @change=${s(e)}
+                .formatOptions=${{style:"percent"}}
+                ...=${t(e)}
             >
                 Opacity
             </sp-slider>
         </div>
-    `;
-};
-hideStepper.decorators = [editableDecorator];
-export const Gradient = (args = {}) => {
-  return html`
+    `;hideStepper.decorators=[x];export const Gradient=(e={})=>i`
         <div
             style="
                 width: 500px;
@@ -311,49 +159,29 @@ export const Gradient = (args = {}) => {
                 min="0"
                 value="50"
                 id="opacity-slider"
-                @input=${handleEvent(args)}
-                @change=${handleEvent(args)}
-                ...=${spreadProps(args)}
+                @input=${s(e)}
+                @change=${s(e)}
+                ...=${t(e)}
             ></sp-slider>
         </div>
-    `;
-};
-Gradient.args = {
-  variant: void 0
-};
-export const tick = (args = {}) => {
-  return html`
+    `;Gradient.args={variant:void 0};export const tick=(e={})=>i`
         <sp-slider
             label="Slider Label"
             variant="tick"
             min="0"
             max="92"
-            ...=${spreadProps(args)}
+            ...=${t(e)}
         ></sp-slider>
-    `;
-};
-tick.args = {
-  variant: "tick",
-  tickStep: 5
-};
-export const tickLabels = (args = {}) => {
-  return html`
+    `;tick.args={variant:"tick",tickStep:5};export const tickLabels=(e={})=>i`
         <sp-slider
             label="Slider Label"
             tick-labels
             variant="tick"
             min="50"
             max="75"
-            ...=${spreadProps(args)}
+            ...=${t(e)}
         ></sp-slider>
-    `;
-};
-tickLabels.args = {
-  variant: "tick",
-  tickStep: 5
-};
-export const Disabled = (args = {}) => {
-  return html`
+    `;tickLabels.args={variant:"tick",tickStep:5};export const Disabled=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 disabled
@@ -362,13 +190,10 @@ export const Disabled = (args = {}) => {
                 min="0"
                 max="20"
                 label="Intensity"
-                ...=${spreadProps(args)}
+                ...=${t(e)}
             ></sp-slider>
         </div>
-    `;
-};
-export const Quiet = (args = {}) => {
-  return html`
+    `,Quiet=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 editable
@@ -379,13 +204,10 @@ export const Quiet = (args = {}) => {
                 min="0"
                 max="20"
                 label="Intensity"
-                ...=${spreadProps(args)}
+                ...=${t(e)}
             ></sp-slider>
         </div>
-    `;
-};
-export const Indeterminate = (args = {}) => {
-  return html`
+    `,Indeterminate=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 editable
@@ -395,41 +217,35 @@ export const Indeterminate = (args = {}) => {
                 min="0"
                 max="20"
                 label="Intensity"
-                @input=${handleEvent(args)}
-                @change=${handleEvent(args)}
-                ...=${spreadProps(args)}
+                @input=${s(e)}
+                @change=${s(e)}
+                ...=${t(e)}
             ></sp-slider>
         </div>
-    `;
-};
-export const ExplicitHandle = (args = {}) => {
-  return html`
+    `,ExplicitHandle=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 step="0.5"
                 min="0"
                 max="20"
-                @input=${handleHandleEvent(args)}
-                @change=${handleHandleEvent(args)}
-                ...=${spreadProps(args)}
+                @input=${o(e)}
+                @change=${o(e)}
+                ...=${t(e)}
             >
                 Intensity
                 <sp-slider-handle slot="handle" value="5"></sp-slider-handle>
             </sp-slider>
         </div>
-    `;
-};
-export const TwoHandles = (args = {}) => {
-  return html`
+    `,TwoHandles=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 value="5"
                 step="1"
                 min="0"
                 max="255"
-                @input=${handleHandleEvent(args)}
-                @change=${handleHandleEvent(args)}
-                ...=${spreadProps(args)}
+                @input=${o(e)}
+                @change=${o(e)}
+                ...=${t(e)}
             >
                 Output Levels
                 <sp-slider-handle
@@ -444,27 +260,17 @@ export const TwoHandles = (args = {}) => {
                 ></sp-slider-handle>
             </sp-slider>
         </div>
-    `;
-};
-TwoHandles.args = {
-  variant: "range",
-  tickStep: 10
-};
-export const TwoHandlesPt = (args = {}) => {
-  return html`
+    `;TwoHandles.args={variant:"range",tickStep:10};export const TwoHandlesPt=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 value="5"
                 step="1"
                 min="0"
                 max="255"
-                @input=${handleHandleEvent(args)}
-                @change=${handleHandleEvent(args)}
-                .formatOptions=${{
-    style: "unit",
-    unit: "pt"
-  }}
-                ...=${spreadProps(args)}
+                @input=${o(e)}
+                @change=${o(e)}
+                .formatOptions=${{style:"unit",unit:"pt"}}
+                ...=${t(e)}
             >
                 Output Levels
                 <sp-slider-handle
@@ -479,27 +285,17 @@ export const TwoHandlesPt = (args = {}) => {
                 ></sp-slider-handle>
             </sp-slider>
         </div>
-    `;
-};
-TwoHandlesPt.args = {
-  variant: "range",
-  tickStep: 10
-};
-export const ThreeHandlesPc = (args = {}) => {
-  return html`
+    `;TwoHandlesPt.args={variant:"range",tickStep:10};export const ThreeHandlesPc=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 value="5"
                 step="1"
                 min="0"
                 max="255"
-                @input=${handleHandleEvent(args)}
-                @change=${handleHandleEvent(args)}
-                .formatOptions=${{
-    style: "unit",
-    unit: "pc"
-  }}
-                ...=${spreadProps(args)}
+                @input=${o(e)}
+                @change=${o(e)}
+                .formatOptions=${{style:"unit",unit:"pc"}}
+                ...=${t(e)}
             >
                 Output Levels
                 <sp-slider-handle slot="handle" value="5"></sp-slider-handle>
@@ -507,18 +303,15 @@ export const ThreeHandlesPc = (args = {}) => {
                 <sp-slider-handle slot="handle" value="250"></sp-slider-handle>
             </sp-slider>
         </div>
-    `;
-};
-export const ThreeHandlesOrdered = (args = {}) => {
-  return html`
+    `,ThreeHandlesOrdered=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 step="1"
                 min="0"
                 max="255"
-                @input=${handleHandleEvent(args)}
-                @change=${handleHandleEvent(args)}
-                ...=${spreadProps(args)}
+                @input=${o(e)}
+                @change=${o(e)}
+                ...=${t(e)}
             >
                 Output Levels
                 <sp-slider-handle
@@ -542,101 +335,22 @@ export const ThreeHandlesOrdered = (args = {}) => {
                 ></sp-slider-handle>
             </sp-slider>
         </div>
-    `;
-};
-ThreeHandlesOrdered.args = {
-  tickStep: 10
-};
-export const ThreeHandlesComplex = (args = {}) => {
-  const values = {
-    black: 50,
-    gray: 4.98,
-    white: 225
-  };
-  const handleEvent2 = ({ onInput, onChange }) => (event) => {
-    const target = event.target;
-    if (target.value != null) {
-      if (typeof target.value === "object") {
-        const value = JSON.stringify(target.value, null, 2);
-        if (onInput && event.type === "input") {
-          onInput(value);
-        } else if (onChange && event.type === "change") {
-          onChange(value);
-        }
-      } else {
-        const value = `${target.name}: ${target.value}`;
-        if (onInput && event.type === "input") {
-          onInput(value);
-        } else if (onChange && event.type === "change") {
-          onChange(value);
-        }
-      }
-      values[target.name] = target.value;
-    }
-  };
-  const grayNormalization = {
-    toNormalized(value) {
-      const normalizedBlack = values.black / 255;
-      const normalizedWhite = values.white / 255;
-      const clamped = Math.max(Math.min(value, 1), 0);
-      return clamped * (normalizedWhite - normalizedBlack) + normalizedBlack;
-    },
-    fromNormalized(value) {
-      const normalizedBlack = values.black / 255;
-      const normalizedWhite = values.white / 255;
-      const clamped = Math.max(Math.min(value, normalizedWhite), normalizedBlack);
-      return (clamped - normalizedBlack) / (normalizedWhite - normalizedBlack);
-    }
-  };
-  const blackNormalization = {
-    toNormalized(value) {
-      const clamped = Math.min(value, values.white);
-      return clamped / 255;
-    },
-    fromNormalized(value) {
-      const denormalized = value * 255;
-      return Math.min(denormalized, values.white);
-    }
-  };
-  const whiteNormalization = {
-    toNormalized(value) {
-      const clamped = Math.max(value, values.black);
-      return clamped / 255;
-    },
-    fromNormalized(value) {
-      const denormalized = value * 255;
-      return Math.max(denormalized, values.black);
-    }
-  };
-  const computeGray = (value) => {
-    let result = 1;
-    if (value > 0.5) {
-      result = Math.max(2 * (1 - value), 0.01);
-    } else if (value < 0.5) {
-      result = ((1 - 2 * value) * (Math.sqrt(9.99) - 1) + 1) ** 2;
-    }
-    const formatOptions = {
-      maximumFractionDigits: 2,
-      minimumFractionDigits: 2
-    };
-    return new Intl.NumberFormat(navigator.language, formatOptions).format(result);
-  };
-  return html`
+    `;ThreeHandlesOrdered.args={tickStep:10};export const ThreeHandlesComplex=(e={})=>{const l={black:50,gray:4.98,white:225},r=({onInput:a,onChange:n})=>p=>{const m=p.target;if(m.value!=null){if(typeof m.value=="object"){const c=JSON.stringify(m.value,null,2);a&&p.type==="input"?a(c):n&&p.type==="change"&&n(c)}else{const c=`${m.name}: ${m.value}`;a&&p.type==="input"?a(c):n&&p.type==="change"&&n(c)}l[m.name]=m.value}},d={toNormalized(a){const n=l.black/255,p=l.white/255;return Math.max(Math.min(a,1),0)*(p-n)+n},fromNormalized(a){const n=l.black/255,p=l.white/255;return(Math.max(Math.min(a,p),n)-n)/(p-n)}},u={toNormalized(a){return Math.min(a,l.white)/255},fromNormalized(a){const n=a*255;return Math.min(n,l.white)}},h={toNormalized(a){return Math.max(a,l.black)/255},fromNormalized(a){const n=a*255;return Math.max(n,l.black)}},v=a=>{let n=1;a>.5?n=Math.max(2*(1-a),.01):a<.5&&(n=((1-2*a)*(Math.sqrt(9.99)-1)+1)**2);const p={maximumFractionDigits:2,minimumFractionDigits:2};return new Intl.NumberFormat(navigator.language,p).format(n)};return i`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 step="1"
                 min="0"
                 max="255"
-                @input=${handleEvent2}
-                @change=${handleEvent2}
-                ...=${spreadProps(args)}
+                @input=${r}
+                @change=${r}
+                ...=${t(e)}
             >
                 Output Levels
                 <sp-slider-handle
                     slot="handle"
                     name="black"
-                    value=${values.black}
-                    .normalization=${blackNormalization}
+                    value=${l.black}
+                    .normalization=${u}
                 ></sp-slider-handle>
                 <sp-slider-handle
                     slot="handle"
@@ -645,61 +359,50 @@ export const ThreeHandlesComplex = (args = {}) => {
                     min="0"
                     max="1"
                     step="0.005"
-                    .normalization=${grayNormalization}
-                    .getAriaHandleText=${computeGray}
+                    .normalization=${d}
+                    .getAriaHandleText=${v}
                 ></sp-slider-handle>
                 <sp-slider-handle
                     slot="handle"
                     name="white"
-                    value=${values.white}
-                    .normalization=${whiteNormalization}
+                    value=${l.white}
+                    .normalization=${h}
                 ></sp-slider-handle>
             </sp-slider>
         </div>
-    `;
-};
-ThreeHandlesOrdered.args = {
-  tickStep: 10
-};
-export const focusTabDemo = (args = {}) => {
-  const value = 50;
-  const min = 0;
-  const max = 100;
-  const step = 1;
-  return html`
+    `};ThreeHandlesOrdered.args={tickStep:10};export const focusTabDemo=(e={})=>i`
         <div style="width: 500px; margin: 12px 20px 20px;">
             <sp-slider
-                value="${value}"
-                step="${step}"
-                min="${min}"
-                max="${max}"
+                value="${50}"
+                step="${1}"
+                min="${0}"
+                max="${100}"
                 label="Opacity"
                 id="opacity-slider-opacity"
-                ...=${spreadProps(args)}
+                ...=${t(e)}
             ></sp-slider>
         </div>
         <div style="width: 500px; margin: 20px;">
             <sp-slider
-                value="${value}"
-                step="${step}"
-                min="${min}"
-                max="${max}"
+                value="${50}"
+                step="${1}"
+                min="${0}"
+                max="${100}"
                 label="Lightness"
                 id="opacity-slider-lightness"
-                ...=${spreadProps(args)}
+                ...=${t(e)}
             ></sp-slider>
         </div>
         <div style="width: 500px; margin: 20px 20px 12px;">
             <sp-slider
-                value="${value}"
-                step="${step}"
-                min="${min}"
-                max="${max}"
+                value="${50}"
+                step="${1}"
+                min="${0}"
+                max="${100}"
                 label="Saturation"
                 id="opacity-slider-saturation"
-                ...=${spreadProps(args)}
+                ...=${t(e)}
             ></sp-slider>
         </div>
     `;
-};
 //# sourceMappingURL=slider.stories.js.map