@rogieking/figui3 1.2.6 → 1.2.7

package/example.html

@@ -535,12 +535,15 @@
                 </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="0"
+                        default="5"
+                        min="0"
+                        max="10"
+                        step="1"
+                        text="true">
             </fig-slider>
         </fig-field>
 

package/fig.css

@@ -1704,7 +1704,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;

package/fig.js

@@ -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,7 +755,7 @@ 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.figInputText) {

package/package.json

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