@spectrum-web-components/slider 0.14.0 → 0.14.2

package/stories/slider.stories.js

@@ -1,82 +1,211 @@
-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`
+"use strict";
+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`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="1"
                 min="0"
                 value=".5"
                 step="0.01"
-                @input=${s(e)}
-                @change=${s(e)}
-                .formatOptions=${{style:"percent"}}
-                ...=${t(e)}
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: "percent" }}
+                ...=${spreadProps(args)}
             >
                 Opacity
             </sp-slider>
         </div>
-    `,noVisibleTextLabel=(e={})=>i`
+    `;
+};
+export const noVisibleTextLabel = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="1"
                 min="0"
                 value=".5"
                 step="0.01"
-                @input=${s(e)}
-                @change=${s(e)}
-                .formatOptions=${{style:"percent"}}
-                ...=${t(e)}
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: "percent" }}
+                ...=${spreadProps(args)}
             >
                 Opacity
             </sp-slider>
         </div>
-    `;noVisibleTextLabel.args={labelVisibility:"value"};export const noVisibleValueLabel=(e={})=>i`
+    `;
+};
+noVisibleTextLabel.args = {
+  labelVisibility: "value"
+};
+export const noVisibleValueLabel = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="1"
                 min="0"
                 value=".5"
                 step="0.01"
-                @input=${s(e)}
-                @change=${s(e)}
-                .formatOptions=${{style:"percent"}}
-                ...=${t(e)}
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: "percent" }}
+                ...=${spreadProps(args)}
             >
                 Opacity
             </sp-slider>
         </div>
-    `;noVisibleValueLabel.args={labelVisibility:"text"};export const noVisibleLabels=(e={})=>i`
+    `;
+};
+noVisibleValueLabel.args = {
+  labelVisibility: "text"
+};
+export const noVisibleLabels = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="1"
                 min="0"
                 value=".5"
                 step="0.01"
-                @input=${s(e)}
-                @change=${s(e)}
-                .formatOptions=${{style:"percent"}}
-                ...=${t(e)}
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: "percent" }}
+                ...=${spreadProps(args)}
             >
                 Opacity
             </sp-slider>
         </div>
-    `;noVisibleLabels.args={labelVisibility:"none"};export const px=(e={})=>i`
+    `;
+};
+noVisibleLabels.args = {
+  labelVisibility: "none"
+};
+export const px = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="360"
                 min="0"
                 value="90"
                 step="1"
-                @input=${s(e)}
-                @change=${s(e)}
-                .formatOptions=${{style:"unit",unit:"px"}}
-                ...=${t(e)}
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{
+    style: "unit",
+    unit: "px"
+  }}
+                ...=${spreadProps(args)}
             >
                 Angle
             </sp-slider>
         </div>
-    `;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()}
+    `;
+};
+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()}
         <number-field-defined></number-field-defined>
-    `;export const editable=(e={})=>i`
+    `;
+};
+export const editable = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 editable
@@ -84,15 +213,23 @@ import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-compon
                 min="0"
                 value="90"
                 step="1"
-                @input=${s(e)}
-                @change=${s(e)}
-                .formatOptions=${{style:"unit",unit:"degree",unitDisplay:"narrow"}}
-                ...=${t(e)}
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{
+    style: "unit",
+    unit: "degree",
+    unitDisplay: "narrow"
+  }}
+                ...=${spreadProps(args)}
             >
                 Angle
             </sp-slider>
         </div>
-    `;editable.decorators=[x];export const editableDisabled=(e={})=>i`
+    `;
+};
+editable.decorators = [editableDecorator];
+export const editableDisabled = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 editable
@@ -101,15 +238,23 @@ import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-compon
                 min="0"
                 value="90"
                 step="1"
-                @input=${s(e)}
-                @change=${s(e)}
-                .formatOptions=${{style:"unit",unit:"degree",unitDisplay:"narrow"}}
-                ...=${t(e)}
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{
+    style: "unit",
+    unit: "degree",
+    unitDisplay: "narrow"
+  }}
+                ...=${spreadProps(args)}
             >
                 Angle
             </sp-slider>
         </div>
-    `;editable.decorators=[x];export const editableCustom=(e={})=>i`
+    `;
+};
+editable.decorators = [editableDecorator];
+export const editableCustom = (args = {}) => {
+  return html`
         <div
             style="width: 500px; margin: 12px 20px; --spectrum-slider-editable-number-field-width: 150px;"
         >
@@ -119,15 +264,19 @@ import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-compon
                 min="0"
                 value="12.75"
                 step="0.25"
-                @input=${s(e)}
-                @change=${s(e)}
-                .formatOptions=${{style:"unit",unit:"hour"}}
-                ...=${t(e)}
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: "unit", unit: "hour" }}
+                ...=${spreadProps(args)}
             >
                 Hours
             </sp-slider>
         </div>
-    `;editableCustom.decorators=[x];export const hideStepper=(e={})=>i`
+    `;
+};
+editableCustom.decorators = [editableDecorator];
+export const hideStepper = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 editable
@@ -136,15 +285,19 @@ import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-compon
                 min="0"
                 value=".5"
                 step="0.01"
-                @input=${s(e)}
-                @change=${s(e)}
-                .formatOptions=${{style:"percent"}}
-                ...=${t(e)}
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: "percent" }}
+                ...=${spreadProps(args)}
             >
                 Opacity
             </sp-slider>
         </div>
-    `;hideStepper.decorators=[x];export const Gradient=(e={})=>i`
+    `;
+};
+hideStepper.decorators = [editableDecorator];
+export const Gradient = (args = {}) => {
+  return html`
         <div
             style="
                 width: 500px;
@@ -159,29 +312,49 @@ import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-compon
                 min="0"
                 value="50"
                 id="opacity-slider"
-                @input=${s(e)}
-                @change=${s(e)}
-                ...=${t(e)}
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                ...=${spreadProps(args)}
             ></sp-slider>
         </div>
-    `;Gradient.args={variant:void 0};export const tick=(e={})=>i`
+    `;
+};
+Gradient.args = {
+  variant: void 0
+};
+export const tick = (args = {}) => {
+  return html`
         <sp-slider
             label="Slider Label"
             variant="tick"
             min="0"
             max="92"
-            ...=${t(e)}
+            ...=${spreadProps(args)}
         ></sp-slider>
-    `;tick.args={variant:"tick",tickStep:5};export const tickLabels=(e={})=>i`
+    `;
+};
+tick.args = {
+  variant: "tick",
+  tickStep: 5
+};
+export const tickLabels = (args = {}) => {
+  return html`
         <sp-slider
             label="Slider Label"
             tick-labels
             variant="tick"
             min="50"
             max="75"
-            ...=${t(e)}
+            ...=${spreadProps(args)}
         ></sp-slider>
-    `;tickLabels.args={variant:"tick",tickStep:5};export const Disabled=(e={})=>i`
+    `;
+};
+tickLabels.args = {
+  variant: "tick",
+  tickStep: 5
+};
+export const Disabled = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 disabled
@@ -190,10 +363,13 @@ import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-compon
                 min="0"
                 max="20"
                 label="Intensity"
-                ...=${t(e)}
+                ...=${spreadProps(args)}
             ></sp-slider>
         </div>
-    `,Quiet=(e={})=>i`
+    `;
+};
+export const Quiet = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 editable
@@ -204,10 +380,13 @@ import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-compon
                 min="0"
                 max="20"
                 label="Intensity"
-                ...=${t(e)}
+                ...=${spreadProps(args)}
             ></sp-slider>
         </div>
-    `,Indeterminate=(e={})=>i`
+    `;
+};
+export const Indeterminate = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 editable
@@ -217,35 +396,41 @@ import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-compon
                 min="0"
                 max="20"
                 label="Intensity"
-                @input=${s(e)}
-                @change=${s(e)}
-                ...=${t(e)}
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                ...=${spreadProps(args)}
             ></sp-slider>
         </div>
-    `,ExplicitHandle=(e={})=>i`
+    `;
+};
+export const ExplicitHandle = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 step="0.5"
                 min="0"
                 max="20"
-                @input=${o(e)}
-                @change=${o(e)}
-                ...=${t(e)}
+                @input=${handleHandleEvent(args)}
+                @change=${handleHandleEvent(args)}
+                ...=${spreadProps(args)}
             >
                 Intensity
                 <sp-slider-handle slot="handle" value="5"></sp-slider-handle>
             </sp-slider>
         </div>
-    `,TwoHandles=(e={})=>i`
+    `;
+};
+export const TwoHandles = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 value="5"
                 step="1"
                 min="0"
                 max="255"
-                @input=${o(e)}
-                @change=${o(e)}
-                ...=${t(e)}
+                @input=${handleHandleEvent(args)}
+                @change=${handleHandleEvent(args)}
+                ...=${spreadProps(args)}
             >
                 Output Levels
                 <sp-slider-handle
@@ -260,17 +445,27 @@ import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-compon
                 ></sp-slider-handle>
             </sp-slider>
         </div>
-    `;TwoHandles.args={variant:"range",tickStep:10};export const TwoHandlesPt=(e={})=>i`
+    `;
+};
+TwoHandles.args = {
+  variant: "range",
+  tickStep: 10
+};
+export const TwoHandlesPt = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 value="5"
                 step="1"
                 min="0"
                 max="255"
-                @input=${o(e)}
-                @change=${o(e)}
-                .formatOptions=${{style:"unit",unit:"pt"}}
-                ...=${t(e)}
+                @input=${handleHandleEvent(args)}
+                @change=${handleHandleEvent(args)}
+                .formatOptions=${{
+    style: "unit",
+    unit: "pt"
+  }}
+                ...=${spreadProps(args)}
             >
                 Output Levels
                 <sp-slider-handle
@@ -285,17 +480,27 @@ import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-compon
                 ></sp-slider-handle>
             </sp-slider>
         </div>
-    `;TwoHandlesPt.args={variant:"range",tickStep:10};export const ThreeHandlesPc=(e={})=>i`
+    `;
+};
+TwoHandlesPt.args = {
+  variant: "range",
+  tickStep: 10
+};
+export const ThreeHandlesPc = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 value="5"
                 step="1"
                 min="0"
                 max="255"
-                @input=${o(e)}
-                @change=${o(e)}
-                .formatOptions=${{style:"unit",unit:"pc"}}
-                ...=${t(e)}
+                @input=${handleHandleEvent(args)}
+                @change=${handleHandleEvent(args)}
+                .formatOptions=${{
+    style: "unit",
+    unit: "pc"
+  }}
+                ...=${spreadProps(args)}
             >
                 Output Levels
                 <sp-slider-handle slot="handle" value="5"></sp-slider-handle>
@@ -303,15 +508,18 @@ import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-compon
                 <sp-slider-handle slot="handle" value="250"></sp-slider-handle>
             </sp-slider>
         </div>
-    `,ThreeHandlesOrdered=(e={})=>i`
+    `;
+};
+export const ThreeHandlesOrdered = (args = {}) => {
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 step="1"
                 min="0"
                 max="255"
-                @input=${o(e)}
-                @change=${o(e)}
-                ...=${t(e)}
+                @input=${handleHandleEvent(args)}
+                @change=${handleHandleEvent(args)}
+                ...=${spreadProps(args)}
             >
                 Output Levels
                 <sp-slider-handle
@@ -335,22 +543,106 @@ import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-compon
                 ></sp-slider-handle>
             </sp-slider>
         </div>
-    `;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`
+    `;
+};
+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`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 step="1"
                 min="0"
                 max="255"
-                @input=${r}
-                @change=${r}
-                ...=${t(e)}
+                @input=${handleEvent2}
+                @change=${handleEvent2}
+                ...=${spreadProps(args)}
             >
                 Output Levels
                 <sp-slider-handle
                     slot="handle"
                     name="black"
-                    value=${l.black}
-                    .normalization=${u}
+                    value=${values.black}
+                    .normalization=${blackNormalization}
                 ></sp-slider-handle>
                 <sp-slider-handle
                     slot="handle"
@@ -359,50 +651,61 @@ import{html as i}from"@spectrum-web-components/base";import"@spectrum-web-compon
                     min="0"
                     max="1"
                     step="0.005"
-                    .normalization=${d}
-                    .getAriaHandleText=${v}
+                    .normalization=${grayNormalization}
+                    .getAriaHandleText=${computeGray}
                 ></sp-slider-handle>
                 <sp-slider-handle
                     slot="handle"
                     name="white"
-                    value=${l.white}
-                    .normalization=${h}
+                    value=${values.white}
+                    .normalization=${whiteNormalization}
                 ></sp-slider-handle>
             </sp-slider>
         </div>
-    `};ThreeHandlesOrdered.args={tickStep:10};export const focusTabDemo=(e={})=>i`
+    `;
+};
+ThreeHandlesOrdered.args = {
+  tickStep: 10
+};
+export const focusTabDemo = (args = {}) => {
+  const value = 50;
+  const min = 0;
+  const max = 100;
+  const step = 1;
+  return html`
         <div style="width: 500px; margin: 12px 20px 20px;">
             <sp-slider
-                value="${50}"
-                step="${1}"
-                min="${0}"
-                max="${100}"
+                value="${value}"
+                step="${step}"
+                min="${min}"
+                max="${max}"
                 label="Opacity"
                 id="opacity-slider-opacity"
-                ...=${t(e)}
+                ...=${spreadProps(args)}
             ></sp-slider>
         </div>
         <div style="width: 500px; margin: 20px;">
             <sp-slider
-                value="${50}"
-                step="${1}"
-                min="${0}"
-                max="${100}"
+                value="${value}"
+                step="${step}"
+                min="${min}"
+                max="${max}"
                 label="Lightness"
                 id="opacity-slider-lightness"
-                ...=${t(e)}
+                ...=${spreadProps(args)}
             ></sp-slider>
         </div>
         <div style="width: 500px; margin: 20px 20px 12px;">
             <sp-slider
-                value="${50}"
-                step="${1}"
-                min="${0}"
-                max="${100}"
+                value="${value}"
+                step="${step}"
+                min="${min}"
+                max="${max}"
                 label="Saturation"
                 id="opacity-slider-saturation"
-                ...=${t(e)}
+                ...=${spreadProps(args)}
             ></sp-slider>
         </div>
     `;
+};
 //# sourceMappingURL=slider.stories.js.map