@rogieking/figui3 1.0.35 → 1.0.36

package/fig.css

@@ -1235,7 +1235,8 @@ fig-slider {
   --slider-percent: calc(var(--slider-complete) * 100%);
   --start-percent: calc(var(--default, 0) * 100%);
   --slider-tick-size: calc(var(--slider-height) / 4);
-  --slider-handle-shadow: inset 0 0 0 4px var(--figma-color-icon-onbrand),
+  --slider-handle-shadow: inset 0 0 0 calc(4px + 0.5rem * var(--unchanged))
+      var(--figma-color-icon-onbrand),
     inset 0 0 0 5px rgba(0, 0, 0, 0.1), 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
     0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 3px 8px 0px rgba(0, 0, 0, 0.1),
     0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
@@ -1279,11 +1280,18 @@ fig-slider {
     .fig-slider-input-container {
       &::before {
         --left-start: calc(var(--start-percent) - var(--slider-height) / 2);
-        left: min(var(--left-start), var(--slider-percent));
+        left: min(
+          var(--left-start),
+          var(--slider-percent) - (var(--slider-complete)) *
+            var(--slider-height)
+        );
         --width: calc(var(--slider-percent) - var(--start-percent));
         --abs-width: max(
-          var(--width) + var(--slider-height) / 2,
-          -1 * var(--width) + var(--slider-height) / 2
+          var(--width) + var(--slider-height) / 2 + (1 - var(--slider-complete)) *
+            var(--slider-height),
+          -1 * var(--width) + var(--slider-height) / 2 + (
+              var(--slider-complete)
+            ) * var(--slider-height)
         );
         width: var(--abs-width);
         --delta: calc(var(--slider-complete) - var(--default));
@@ -1470,13 +1478,16 @@ fig-slider {
       width: var(--slider-tick-size);
       height: var(--slider-tick-size);
       aspect-ratio: 1;
-      margin: 0 auto;
       padding: 0;
       border: 0;
       border-radius: 100%;
       font-size: 0;
       background: var(--figma-color-icon-tertiary);
       display: block;
+
+      &:first-child:last-child {
+        margin: 0 auto;
+      }
     }
   }
 }

package/fig.js

@@ -640,7 +640,6 @@ class FigSlider extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (this.input) {
-      console.log("attributeChangedCallback:", name, oldValue, newValue);
       switch (name) {
         case "color":
           this.color = newValue;
@@ -685,7 +684,10 @@ class FigSlider extends HTMLElement {
     console.log(val);
     this.value = val;
     let complete = this.calculateNormal(val);
+    let defaultValue = this.calculateNormal(this.default);
     this.style.setProperty("--slider-complete", complete);
+    this.style.setProperty("--default", defaultValue);
+    this.style.setProperty("--unchanged", complete === defaultValue ? 1 : 0);
     if (this.textInput) {
       this.textInput.value = val;
     }

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.35"
+  "version": "1.0.36"
 }