@rogieking/figui3 1.0.97 → 1.0.98

package/example.html

@@ -64,15 +64,66 @@
         <option selected>Fourhundred sixty two</option>
     </fig-dropdown>
     <br /><br />
-    <fig-slider min="0"
-                max="1"
-                transform="100"
-                variant="minimal"
-                step="0.01"
-                text="true"
-                style="width:300px;"
-                value="0.5">
-    </fig-slider>
+    <fig-field style="width:300px;">
+        <label>Range slider</label>
+        <fig-slider min="0"
+                    max="1"
+                    transform="100"
+                    variant="minimal"
+                    step="0.01"
+                    text="true"
+                    style="width:300px;"
+                    value="0.5">
+        </fig-slider>
+    </fig-field>
+    <fig-field style="width:300px;">
+        <label>Opacity slider</label>
+        <fig-slider type="opacity"
+                    variant="minimal"
+                    value="0.75"
+                    color="#ff0000"
+                    units="%"
+                    text="true"></fig-slider>
+    </fig-field>
+
+    <fig-field style="width:300px;">
+        <label>Hue slider</label>
+        <fig-slider type="hue"
+                    variant="minimal"
+                    value="55"></fig-slider>
+    </fig-field>
+
+    <fig-field style="width:300px;">
+        <label>Stepper slider</label>
+        <fig-slider type="stepper"
+                    variant="minimal"
+                    value="25"
+                    default="50"
+                    step="25">
+            <datalist id="markers">
+                <option value="0"></option>
+                <option value="25"></option>
+                <option value="50"></option>
+                <option value="75"></option>
+                <option value="100"></option>
+            </datalist>
+        </fig-slider>
+    </fig-field>
+
+    <fig-field style="width:300px;">
+        <label>Delta slider</label>
+        <fig-slider type="delta"
+                    variant="minimal"
+                    value=".25"
+                    default="0"
+                    step="0.25"
+                    max="5"
+                    min="-5">
+            <datalist id="markers">
+                <option value="0"></option>
+            </datalist>
+        </fig-slider>
+    </fig-field>
     <br />
     <fig-input-text min="0"
                     max="1"

package/fig.css

@@ -1429,6 +1429,7 @@ details {
 /* Sliders */
 .fig-slider,
 fig-slider {
+  --slider-field-height: 1.5rem;
   --slider-height: 1rem;
   --slider-thumb-size: var(--slider-height);
   --slider-percent: calc(var(--slider-complete) * 100%);
@@ -1442,16 +1443,20 @@ fig-slider {
     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),
     0 0 0 1px var(--figma-color-border-selected);
+  --slider-transition: all 0.1s ease-in-out;
 
   display: inline-flex;
   align-items: center;
   position: relative;
+  height: var(--slider-field-height);
+  transition: var(--slider-transition);
 
   .fig-slider-input-container {
     height: var(--slider-height);
     position: relative;
     display: block;
     width: 100%;
+    transition: var(--slider-transition);
 
     /* Track */
     &::before {
@@ -1548,6 +1553,7 @@ fig-slider {
     display: block;
     width: 100%;
     background-color: transparent;
+    transition: var(--slider-transition);
 
     &:active::-webkit-slider-thumb {
       cursor: grabbing;
@@ -1561,6 +1567,7 @@ fig-slider {
     &::-webkit-slider-thumb {
       appearance: none;
       -webkit-appearance: none;
+      transition: var(--slider-transition);
       border-radius: 100%;
       height: var(--slider-thumb-size);
       width: var(--slider-thumb-size);
@@ -1594,6 +1601,7 @@ fig-slider {
     &::-webkit-slider-runnable-track {
       height: var(--slider-height);
       background-color: transparent;
+      transition: var(--slider-transition);
       border-radius: calc(var(--slider-height) / 2);
       box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
       background: var(--figma-color-bg-secondary);
@@ -1618,6 +1626,7 @@ fig-slider {
     display: block;
     width: 100%;
     background-color: transparent;
+    transition: var(--slider-transition);
 
     &:focus {
       outline: none;
@@ -1640,6 +1649,7 @@ fig-slider {
       cursor: grab;
       cursor: -moz-grab;
       box-shadow: var(--slider-handle-shadow);
+      transition: var(--slider-transition);
     }
 
     &:disabled {
@@ -1665,6 +1675,7 @@ fig-slider {
       border-radius: calc(var(--slider-height) / 2);
       box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
       background: var(--figma-color-bg-secondary);
+      transition: var(--slider-transition);
     }
 
     &.hue::-moz-range-track {
@@ -1680,7 +1691,9 @@ fig-slider {
   datalist {
     position: absolute;
     inset: 0;
+    top: calc((var(--slider-field-height) - var(--slider-height))/2);
     display: flex;
+    transition: var(--slider-transition);
     background: transparent;
     align-items: center;
     margin: 0;
@@ -1709,13 +1722,12 @@ fig-slider {
       }
     }
   }
-  &[variant="minimal"]{
-    transition: all 0.2s ease-in-out;
-  }
+
   &[variant="minimal"] {
     --slider-height: 0.25rem;
     --slider-thumb-size: 0.5rem;
-    height: 1.5rem;
+    --slider-tick-size: calc(var(--slider-height) / 2);
+
     .fig-slider-input-container {
       height: var(--slider-height);
       position: relative;
@@ -1742,14 +1754,21 @@ fig-slider {
     &:focus-within {
       --slider-height: 1rem;
       --slider-thumb-size: 1rem;
+      --slider-tick-size: calc(var(--slider-height) / 4);
       .fig-slider-input-container {
-      &::before {
-          background: var(--figma-color-bg-brand);
+        &::before {
+            box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+            background: var(--figma-color-bg-brand);
+          }
+        }
+        input[type="range"] {
+          &::-webkit-slider-runnable-track {
+            box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+          }
+        }
+        fig-input-text {
+          height: auto;
         }
-      }
-      fig-input-text {
-        height: auto;
-      }
     }
   }
 }

package/package.json

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