@rogieking/figui3 1.2.6 → 1.2.8

package/example.html

@@ -524,7 +524,7 @@
             <label>Stepper slider</label>
             <fig-slider type="stepper"
                         value="25"
-                        default="50"
+                        default="75"
                         step="25">
                 <datalist>
                     <option value="0"></option>
@@ -535,12 +535,14 @@
                 </datalist>
             </fig-slider>
         </fig-field>
-        <fig-field>
+        <fig-field direction="horizontal">
             <label>Stepper slider (auto)</label>
             <fig-slider type="stepper"
-                        value="25"
-                        default="50"
-                        step="25">
+                        value="3"
+                        min="1"
+                        max="10"
+                        step="1"
+                        text="true">
             </fig-slider>
         </fig-field>
 

package/fig.css

@@ -1494,18 +1494,6 @@ fig-slider {
       &::before {
         display: none;
       }
-      /* Default tick */
-      &::after {
-        content: "";
-        display: block;
-        width: var(--slider-tick-size);
-        height: var(--slider-tick-size);
-        border-radius: 100%;
-        background: var(--figma-color-icon);
-        position: absolute;
-        left: calc(var(--default) * 100% - var(--slider-tick-size) / 2);
-        top: calc(50% - var(--slider-tick-size) / 2);
-      }
     }
   }
 
@@ -1704,7 +1692,7 @@ fig-slider {
   datalist {
     position: absolute;
     inset: 0;
-    top: calc((var(--slider-field-height) - var(--slider-height)) / 2);
+    top: 0;
     display: flex;
     transition: var(--slider-transition);
     background: transparent;
@@ -1729,6 +1717,9 @@ fig-slider {
       font-size: 0;
       background: var(--figma-color-icon-tertiary);
       display: block;
+      &[default] {
+        background: var(--figma-color-icon);
+      }
 
       &:first-child:last-child {
         margin: 0 auto;

package/fig.js

@@ -673,7 +673,6 @@ class FigSlider extends HTMLElement {
   }
   #regenerateInnerHTML() {
     this.value = Number(this.getAttribute("value") || 0);
-    this.default = this.getAttribute("default") || null;
     this.type = this.getAttribute("type") || "range";
     this.text = this.getAttribute("text") || false;
     this.units = this.getAttribute("units") || "";
@@ -685,6 +684,7 @@ class FigSlider extends HTMLElement {
     this.max = Number(this.getAttribute("max") || defaults.max);
     this.step = Number(this.getAttribute("step") || defaults.step);
     this.color = this.getAttribute("color") || defaults?.color;
+    this.default = this.getAttribute("default") || this.min;
 
     if (this.color) {
       this.style.setProperty("--color", this.color);
@@ -726,6 +726,7 @@ class FigSlider extends HTMLElement {
     //child nodes hack
     requestAnimationFrame(() => {
       this.input = this.querySelector("[type=range]");
+      this.inputContainer = this.querySelector(".fig-slider-input-container");
       this.input.removeEventListener("input", this.handleInput);
       this.input.addEventListener("input", this.handleInput.bind(this));
 
@@ -739,6 +740,7 @@ class FigSlider extends HTMLElement {
       this.datalist = this.querySelector("datalist");
       this.figInputText = this.querySelector("fig-input-text");
       if (this.datalist) {
+        this.inputContainer.append(this.datalist);
         this.datalist.setAttribute(
           "id",
           this.datalist.getAttribute("id") || figUniqueId()
@@ -753,9 +755,17 @@ class FigSlider extends HTMLElement {
           option.setAttribute("value", this.min + i * this.step);
           this.datalist.append(option);
         }
-        this.append(this.datalist);
+        this.inputContainer.append(this.datalist);
         this.input.setAttribute("list", this.datalist.getAttribute("id"));
       }
+      if (this.datalist) {
+        let defaultOption = this.datalist.querySelector(
+          `option[value='${this.default}']`
+        );
+        if (defaultOption) {
+          defaultOption.setAttribute("default", "true");
+        }
+      }
       if (this.figInputText) {
         this.figInputText.removeEventListener("input", this.handleTextInput);
         this.figInputText.addEventListener(
@@ -841,15 +851,14 @@ class FigSlider extends HTMLElement {
     }
   }
   #calculateNormal(value) {
-    let min = Number(this.input.min);
-    let max = Number(this.input.max);
-    let val = value;
-    return (val - min) / (max - min);
+    let min = Number(this.min);
+    let max = Number(this.max);
+    return (Number(value) - min) / (max - min);
   }
   #syncProperties() {
     let complete = this.#calculateNormal(this.value);
-    let defaultValue = this.#calculateNormal(this.default);
     this.style.setProperty("--slider-complete", complete);
+    let defaultValue = this.#calculateNormal(this.default);
     this.style.setProperty("--default", defaultValue);
     this.style.setProperty("--unchanged", complete === defaultValue ? 1 : 0);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {