@rogieking/figui3 1.3.8 → 1.3.9

package/example.html

@@ -23,6 +23,16 @@
         <h2>UI3 Components</h2>
     </fig-header>
     <fig-content>
+        <fig-field>
+            <fig-slider type="delta"
+                        value=".25"
+                        default="2"
+                        step="0.1"
+                        max="5"
+                        min="-5">
+            </fig-slider>
+        </fig-field>
+
         <br /><br />
         <fig-input-angle value="45"
                          text="true"></fig-input-angle>

package/fig.css

@@ -1514,6 +1514,12 @@ fig-slider {
   }
 
   &[type="delta"] {
+    datalist option {
+      position: absolute;
+      margin: 0;
+      left: calc(var(--start-percent) - var(--slider-tick-size) / 2);
+      top: calc(50% - var(--slider-tick-size) / 2);
+    }
     .fig-slider-input-container {
       &::before {
         --left-start: calc(var(--start-percent) - var(--slider-height) / 2);
@@ -1535,19 +1541,6 @@ fig-slider {
         --abs-delta: max(var(--delta), -1 * var(--delta));
         opacity: calc(var(--abs-delta) * 100);
       }
-
-      &::after {
-        content: "";
-        width: var(--slider-tick-size);
-        height: var(--slider-tick-size);
-        aspect-ratio: 1;
-        border-radius: 100%;
-        font-size: 0;
-        position: absolute;
-        left: calc(var(--start-percent) - var(--slider-tick-size) / 2);
-        top: calc(50% - var(--slider-tick-size) / 2);
-        background: var(--figma-color-icon-onbrand);
-      }
     }
   }
 

package/fig.js

@@ -757,6 +757,14 @@ class FigSlider extends HTMLElement {
         }
         this.inputContainer.append(this.datalist);
         this.input.setAttribute("list", this.datalist.getAttribute("id"));
+      } else if (this.type === "delta") {
+        this.datalist = document.createElement("datalist");
+        this.datalist.setAttribute("id", figUniqueId());
+        let option = document.createElement("option");
+        option.setAttribute("value", this.default);
+        this.datalist.append(option);
+        this.inputContainer.append(this.datalist);
+        this.input.setAttribute("list", this.datalist.getAttribute("id"));
       }
       if (this.datalist) {
         let defaultOption = this.datalist.querySelector(

package/package.json

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