@rogieking/figui3 1.2.7 → 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>
@@ -538,9 +538,8 @@
         <fig-field direction="horizontal">
             <label>Stepper slider (auto)</label>
             <fig-slider type="stepper"
-                        value="0"
-                        default="5"
-                        min="0"
+                        value="3"
+                        min="1"
                         max="10"
                         step="1"
                         text="true">

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);
-      }
     }
   }
 
@@ -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);
@@ -758,6 +758,14 @@ class FigSlider extends HTMLElement {
         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(
@@ -843,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.7",
+  "version": "1.2.8",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {