@zywave/zui-slider 4.4.0-pre.1 → 4.4.0-pre.3

package/dist/css/zui-slider.fouc.css

@@ -1 +1 @@
-zui-slider:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;--zui-slider-thumb-size: 0.875rem;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}zui-slider:not(:defined)::before{display:block;content:"";height:.25rem;background:linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-blue) var(--zui-slider-thumb-size), var(--zui-blue) 50%, var(--zui-gray-200) 50%, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)));border-radius:.1875rem}zui-slider:not(:defined)::after{position:absolute;top:50%;left:50%;content:"";width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;cursor:grab;transform:translate(-50%, -50%)}zui-slider:not(:defined):active::after{cursor:grabbing}zui-slider:not(:defined) *,zui-slider:not(:defined) *::before,zui-slider:not(:defined) *::after{box-sizing:inherit}zui-slider[range]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-slider[range]:not(:defined)::before{background:linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-blue) var(--zui-slider-thumb-size), var(--zui-blue) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))}zui-slider[range]:not(:defined)::after{display:none}zui-slider[range]:not(:defined) *,zui-slider[range]:not(:defined) *::before,zui-slider[range]:not(:defined) *::after{box-sizing:inherit}zui-slider[disabled]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;cursor:not-allowed}zui-slider[disabled]:not(:defined)::before{background:var(--zui-gray-200)}zui-slider[disabled]:not(:defined)::after{background-color:var(--zui-gray);cursor:not-allowed}zui-slider[disabled]:not(:defined) *,zui-slider[disabled]:not(:defined) *::before,zui-slider[disabled]:not(:defined) *::after{box-sizing:inherit}zui-slider[range][disabled]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-slider[range][disabled]:not(:defined)::before{background:var(--zui-gray-200)}zui-slider[range][disabled]:not(:defined) *,zui-slider[range][disabled]:not(:defined) *::before,zui-slider[range][disabled]:not(:defined) *::after{box-sizing:inherit}
+zui-slider:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;--zui-slider-thumb-size: 0.875rem;position:relative;display:block;margin:0 calc(var(--zui-slider-thumb-size)*-1);padding:calc(var(--zui-slider-thumb-size)/2 - 0.125rem) 0}zui-slider:not(:defined)::before{display:block;content:"";height:.25rem;background:linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-blue) var(--zui-slider-thumb-size), var(--zui-blue) 50%, var(--zui-gray-200) 50%, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)));border-radius:.1875rem}zui-slider:not(:defined)::after{position:absolute;top:50%;left:50%;content:"";width:var(--zui-slider-thumb-size);height:var(--zui-slider-thumb-size);background-color:var(--zui-blue);border-radius:50%;cursor:grab;transform:translate(-50%, -50%)}zui-slider:not(:defined):active::after{cursor:grabbing}zui-slider:not(:defined) *,zui-slider:not(:defined) *::before,zui-slider:not(:defined) *::after{box-sizing:inherit}zui-slider[range]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-slider[range]:not(:defined)::before{background:linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-blue) var(--zui-slider-thumb-size), var(--zui-blue) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))}zui-slider[range]:not(:defined)::after{display:none}zui-slider[range]:not(:defined) *,zui-slider[range]:not(:defined) *::before,zui-slider[range]:not(:defined) *::after{box-sizing:inherit}zui-slider[disabled]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;cursor:not-allowed}zui-slider[disabled]:not(:defined)::before{background:var(--zui-gray-200)}zui-slider[disabled]:not(:defined)::after{background-color:var(--zui-gray);cursor:not-allowed}zui-slider[disabled]:not(:defined) *,zui-slider[disabled]:not(:defined) *::before,zui-slider[disabled]:not(:defined) *::after{box-sizing:inherit}zui-slider[range][disabled]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-slider[range][disabled]:not(:defined)::before{background:var(--zui-gray-200)}zui-slider[range][disabled]:not(:defined) *,zui-slider[range][disabled]:not(:defined) *::before,zui-slider[range][disabled]:not(:defined) *::after{box-sizing:inherit}

package/dist/custom-elements.json

@@ -12,12 +12,7 @@
           "name": "ZuiSlider",
           "cssProperties": [
             {
-              "description": "Controls the visual dot size and thumb hit-area (hit area is 3× this value)",
-              "name": "--zui-slider-thumb-size",
-              "default": "0.875rem (14px)"
-            },
-            {
-              "description": "Width of the floating value input above each thumb",
+              "description": "Width of the floating value input above each slider thumb",
               "name": "--zui-slider-input-width",
               "default": "7ch"
             }
@@ -423,6 +418,13 @@
                   "type": {
                     "text": "'start' | 'end'"
                   }
+                },
+                {
+                  "name": "trackBg",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
                 }
               ]
             },
@@ -577,6 +579,19 @@
               "name": "#onRangeChange",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "#onTrackClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "#showThumbInput",

package/dist/zui-slider-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css `:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host .single-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:.25rem;margin:0;background:var(--zui-gray-200);border-radius:.1875rem;outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out;-webkit-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border:0;border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:disabled{cursor:not-allowed}:host input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem calc(var(--zui-slider-thumb-size)*-1)}:host .range-wrapper input[type=range]{position:absolute;width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);pointer-events:none}@supports(-moz-appearance: none){:host .range-wrapper input[type=range]{top:50%;left:0}}:host .range-wrapper input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-webkit-slider-thumb{margin-top:.125rem;cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-thumb{cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:active::-moz-range-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper .thumb-input{bottom:calc(var(--zui-slider-thumb-size)*2 - 0.0625rem)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) .range-wrapper{cursor:not-allowed}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;
+export const style = css `:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block}:host .single-wrapper,:host .range-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:var(--zui-slider-thumb-size);margin:0;background:rgba(0,0,0,0);outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-moz-range-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-webkit-slider-thumb{transform:translateY(calc(-50% + 0.125rem));-webkit-appearance:none;appearance:none}:host input[type=range]::-moz-range-thumb{border:0}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{cursor:grab}:host .range-wrapper:active{cursor:grabbing}:host .range-wrapper input[type=range]{position:absolute;pointer-events:none}:host .range-wrapper input[type=range]::-webkit-slider-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) input[type=range]:disabled{cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host([disabled]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host([disabled]) .step-dot{background-color:var(--zui-gray)}:host([disabled]) .range-wrapper{cursor:not-allowed}`;
 //# sourceMappingURL=zui-slider-css.js.map

package/dist/zui-slider-css.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-slider-css.js","sourceRoot":"","sources":["../src/zui-slider-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,6sPAA6sP,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host .single-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:.25rem;margin:0;background:var(--zui-gray-200);border-radius:.1875rem;outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out;-webkit-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border:0;border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:disabled{cursor:not-allowed}:host input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem calc(var(--zui-slider-thumb-size)*-1)}:host .range-wrapper input[type=range]{position:absolute;width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);pointer-events:none}@supports(-moz-appearance: none){:host .range-wrapper input[type=range]{top:50%;left:0}}:host .range-wrapper input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-webkit-slider-thumb{margin-top:.125rem;cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-thumb{cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:active::-moz-range-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper .thumb-input{bottom:calc(var(--zui-slider-thumb-size)*2 - 0.0625rem)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) .range-wrapper{cursor:not-allowed}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;\n"]}
+{"version":3,"file":"zui-slider-css.js","sourceRoot":"","sources":["../src/zui-slider-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,+pOAA+pO,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block}:host .single-wrapper,:host .range-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:var(--zui-slider-thumb-size);margin:0;background:rgba(0,0,0,0);outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-moz-range-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-webkit-slider-thumb{transform:translateY(calc(-50% + 0.125rem));-webkit-appearance:none;appearance:none}:host input[type=range]::-moz-range-thumb{border:0}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{cursor:grab}:host .range-wrapper:active{cursor:grabbing}:host .range-wrapper input[type=range]{position:absolute;pointer-events:none}:host .range-wrapper input[type=range]::-webkit-slider-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) input[type=range]:disabled{cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host([disabled]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host([disabled]) .step-dot{background-color:var(--zui-gray)}:host([disabled]) .range-wrapper{cursor:not-allowed}`;\n"]}

package/dist/zui-slider.d.ts

@@ -34,8 +34,7 @@ import { TemplateResult } from 'lit';
  * @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed
  * @prop {boolean} [showMinMax=false] - Shows the min and max values beneath the slider
  *
- * @cssprop [--zui-slider-thumb-size=0.875rem (14px)] - Controls the visual dot size and thumb hit-area (hit area is 3× this value)
- * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each thumb
+ * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each slider thumb
  *
  * @event {CustomEvent} change - Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }
  */

package/dist/zui-slider.js

@@ -46,8 +46,7 @@ import { style } from './zui-slider-css.js';
  * @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed
  * @prop {boolean} [showMinMax=false] - Shows the min and max values beneath the slider
  *
- * @cssprop [--zui-slider-thumb-size=0.875rem (14px)] - Controls the visual dot size and thumb hit-area (hit area is 3× this value)
- * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each thumb
+ * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each slider thumb
  *
  * @event {CustomEvent} change - Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }
  */
@@ -325,7 +324,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
       <div class="single-wrapper">
         <input
           aria-label="Slider value"
-          style=${styleMap({ background: this.#singleTrackBackground(progress) })}
+          style=${styleMap({ '--zui-slider-track-bg': this.#singleTrackBackground(progress) })}
           type="range"
           .min="${String(this.min)}"
           .max="${String(this.max)}"
@@ -339,8 +338,8 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           @focus="${this.#h.thumb.show}"
           @blur="${this.#h.thumb.hide}"
         />
-        ${this.#renderStepDots()}
         ${this.#renderFloatingInput(this.#value, this.#onThumbFloatingInput, this.#onThumbFloatingChange, 'thumb', this.#isVisible('thumb'), progress)}
+        ${this.#renderStepDots()}
       </div>
     `;
     }
@@ -348,18 +347,16 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         const progressStart = this.progressStart;
         const progressEnd = this.progressEnd;
         return html `
-      <div
-        class="range-wrapper"
-        style=${styleMap({ background: this.#rangeTrackBackground(progressStart, progressEnd) })}
-      >
-        ${this.#renderStepDots()}${this.#renderRangeInput('start')}
+      <div class="range-wrapper" @click="${this.#onTrackClick}">
+        ${this.#renderRangeInput('start', this.#rangeTrackBackground(progressStart, progressEnd))}
         ${this.#renderFloatingInput(this.#valueStart, this.#onStartThumbFloatingInput, this.#onStartThumbFloatingChange, 'startThumb', this.#isVisible('startThumb'), progressStart)}
         ${this.#renderRangeInput('end')}
         ${this.#renderFloatingInput(this.#valueEnd, this.#onEndThumbFloatingInput, this.#onEndThumbFloatingChange, 'endThumb', this.#isVisible('endThumb'), progressEnd)}
+        ${this.#renderStepDots()}
       </div>
     `;
     }
-    #renderRangeInput(which) {
+    #renderRangeInput(which, trackBg) {
         const flag = which === 'start' ? 'startThumb' : 'endThumb';
         const val = which === 'start' ? this.#valueStart : this.#valueEnd;
         const onInput = which === 'start' ? this.#onRangeStartInput : this.#onRangeEndInput;
@@ -372,6 +369,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         aria-label="${which === 'start' ? 'Range start' : 'Range end'}"
         class="range-${which}"
         type="range"
+        style=${trackBg ? styleMap({ '--zui-slider-track-bg': trackBg }) : nothing}
         .min="${String(this.min)}"
         .max="${String(this.max)}"
         .step="${this.step > 0 ? String(this.step) : '1'}"
@@ -529,6 +527,43 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
             bubbles: true,
         }));
     }
+    #onTrackClick(e) {
+        if (this.disabled || this.readOnly) {
+            return;
+        }
+        const wrapper = e.currentTarget;
+        const rect = wrapper.getBoundingClientRect();
+        // Thumb diameter is 3× the custom property; radius is 1.5×. Track is inset by one radius each side.
+        const thumbRadius = 1.5 * parseFloat(getComputedStyle(this).getPropertyValue('--zui-slider-thumb-size'));
+        const trackLeft = rect.left + thumbRadius;
+        const effectiveWidth = rect.width - 2 * thumbRadius;
+        const fraction = Math.max(0, Math.min(1, (e.clientX - trackLeft) / effectiveWidth));
+        const rawValue = this.min + fraction * (this.max - this.min);
+        // Ignore clicks that land within a thumb's hit area — those bubble up from native input
+        // interactions and should not be treated as track clicks.
+        const startX = trackLeft + (this.progressStart / 100) * effectiveWidth;
+        const endX = trackLeft + (this.progressEnd / 100) * effectiveWidth;
+        if (Math.abs(e.clientX - startX) <= thumbRadius || Math.abs(e.clientX - endX) <= thumbRadius) {
+            return;
+        }
+        const snappedStr = this.#processFloatingValue(rawValue);
+        const snapped = parseFloat(snappedStr);
+        const startNum = parseFloat(this.#valueStart);
+        const endNum = parseFloat(this.#valueEnd);
+        // Move whichever thumb is closer to the click; prefer start on a tie
+        if (Math.abs(rawValue - startNum) <= Math.abs(rawValue - endNum)) {
+            if (snapped < endNum) {
+                this.valueStart = snappedStr;
+                this.#onRangeChange();
+            }
+        }
+        else {
+            if (snapped > startNum) {
+                this.valueEnd = snappedStr;
+                this.#onRangeChange();
+            }
+        }
+    }
     #showThumbInput(flag) {
         if (this.disabled) {
             return;

package/dist/zui-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-slider.js","sourceRoot":"","sources":["../src/zui-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiFormAssociatedElement } from '@zywave/zui-base';\nimport { html, nothing, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './zui-slider-css.js';\n\ntype ThumbFlag = 'thumb' | 'startThumb' | 'endThumb';\n\n/**\n * A range form control for choosing values along a slider.\n * @element zui-slider\n *\n * @attr {string | null} [name=null] - The name of this element that is associated with form submission\n * @attr {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @attr {boolean} [readonly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @attr {number} [value=50] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @attr {boolean} [range=false] - Enables range mode with two thumbs for selecting a range\n * @attr {number} [value-start=0] - Represents the start (lower) value in range mode\n * @attr {number} [value-end=100] - Represents the end (upper) value in range mode\n * @attr {number} [min=0] - Represents the minimum permitted value\n * @attr {number} [max=100] - Represents the maximum permitted value\n * @attr {number} [step=0] - Represents the stepping interval; 0 means any value is allowed\n * @attr {boolean} [show-min-max=false] - Shows the min and max values beneath the slider\n *\n * @prop {string | null} [name=null] - The name of this element that is associated with form submission\n * @prop {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @prop {boolean} [readOnly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @prop {number} [valueAsNumber=50] - Returns the value as a number. Invalid or non-numeric values are clamped to min; empty string (representing an in-progress edit) returns NaN\n * @prop {string} [value='50'] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line (single mode)\n * @prop {boolean} [range=false] - Enables range mode with two thumbs for selecting a range\n * @prop {string} [valueStart='0'] - Represents the start (lower) value in range mode\n * @prop {string} [valueEnd='100'] - Represents the end (upper) value in range mode\n * @prop {number} [progressStart=0] - Determines visual placement of the start thumb in range mode\n * @prop {number} [progressEnd=100] - Determines visual placement of the end thumb in range mode\n * @prop {number} [min=0] - Represents the minimum permitted value\n * @prop {number} [max=100] - Represents the maximum permitted value\n * @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed\n * @prop {boolean} [showMinMax=false] - Shows the min and max values beneath the slider\n *\n * @cssprop [--zui-slider-thumb-size=0.875rem (14px)] - Controls the visual dot size and thumb hit-area (hit area is 3× this value)\n * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each thumb\n *\n * @event {CustomEvent} change - Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }\n */\nexport class ZuiSlider extends ZuiFormAssociatedElement {\n  #defaultValue: string = '50';\n  #defaultValueStart: string = '0';\n  #defaultValueEnd: string = '100';\n\n  #value: string = '50';\n  #valueStart: string = '0';\n  #valueEnd: string = '100';\n\n  #thumbInputState = new Map<\n    ThumbFlag,\n    {\n      visible: boolean;\n      focused: boolean;\n      timer?: ReturnType<typeof setTimeout>;\n      debounceTimer?: ReturnType<typeof setTimeout>;\n    }\n  >([\n    ['thumb', { visible: false, focused: false }],\n    ['startThumb', { visible: false, focused: false }],\n    ['endThumb', { visible: false, focused: false }],\n  ]);\n\n  // Pre-bound floating input handlers cached to avoid new function references on every render\n  #onThumbFloatingInput = this.#onFloatingInput('thumb', (v) => (this.value = v));\n  #onStartThumbFloatingInput = this.#onFloatingInput('startThumb', (v) => (this.valueStart = v));\n  #onEndThumbFloatingInput = this.#onFloatingInput('endThumb', (v) => (this.valueEnd = v));\n\n  // Cached floating input change handlers — flush debounce and dispatch immediately on commit (Enter/blur)\n  #onThumbFloatingChange = this.#makeFloatingChange(\n    'thumb',\n    (v) => (this.value = v),\n    () => this.#onChange()\n  );\n  #onStartThumbFloatingChange = this.#makeFloatingChange(\n    'startThumb',\n    (v) => (this.valueStart = v),\n    () => this.#onRangeChange()\n  );\n  #onEndThumbFloatingChange = this.#makeFloatingChange(\n    'endThumb',\n    (v) => (this.valueEnd = v),\n    () => this.#onRangeChange()\n  );\n\n  // Cached range drag input handlers\n  #onRangeStartInput = this.#onRangeInput('start');\n  #onRangeEndInput = this.#onRangeInput('end');\n\n  // Cached pointer/focus handlers per thumb — prevents new closures on every render\n  #h: Record<ThumbFlag, { show: () => void; hide: () => void; focus: () => void; blur: () => void }> = {\n    thumb: {\n      show: () => this.#showThumbInput('thumb'),\n      hide: () => this.#scheduleHideThumbInput('thumb'),\n      focus: () => this.#focusFloatingInput('thumb'),\n      blur: () => this.#blurFloatingInput('thumb'),\n    },\n    startThumb: {\n      show: () => this.#showThumbInput('startThumb'),\n      hide: () => this.#scheduleHideThumbInput('startThumb'),\n      focus: () => this.#focusFloatingInput('startThumb'),\n      blur: () => this.#blurFloatingInput('startThumb'),\n    },\n    endThumb: {\n      show: () => this.#showThumbInput('endThumb'),\n      hide: () => this.#scheduleHideThumbInput('endThumb'),\n      focus: () => this.#focusFloatingInput('endThumb'),\n      blur: () => this.#blurFloatingInput('endThumb'),\n    },\n  };\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateComplete.then(() => {\n      if (this.range) {\n        const [startInput, endInput] = this.#rangeInputs();\n        this.#valueStart = startInput.value;\n        this.#valueEnd = endInput.value;\n        this.#defaultValueStart = startInput.value;\n        this.#defaultValueEnd = endInput.value;\n        this._setFormValue(`${startInput.value},${endInput.value}`);\n      } else {\n        const input = this.#singleInput();\n        this.#value = input.value;\n        this.#defaultValue = input.value;\n        this._setFormValue(input.value);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#clearAllThumbInputState();\n    // Schedule a re-render so the cleared visibility state is reflected in the DOM.\n    // Lit defers this render until the element reconnects if it is currently disconnected.\n    this.requestUpdate();\n  }\n\n  protected updated(changed: Map<PropertyKey, unknown>) {\n    if (changed.has('disabled') && this.disabled) {\n      this.#clearAllThumbInputState();\n    }\n    if (changed.has('min') || changed.has('max')) {\n      // The native inputs have already clamped (and step-snapped) their values to the new bounds.\n      // Read them back and sync internal state + form value. If the value changed, request a\n      // re-render so the floating input (which binds to #value/#valueStart/#valueEnd) stays in sync.\n      if (this.range) {\n        const [startInput, endInput] = this.#rangeInputs();\n        const newStart = startInput.value;\n        const newEnd = endInput.value;\n        if (newStart !== this.#valueStart || newEnd !== this.#valueEnd) {\n          this.#valueStart = newStart;\n          this.#valueEnd = newEnd;\n          this.requestUpdate();\n        }\n        this._setFormValue(`${this.#valueStart},${this.#valueEnd}`);\n      } else {\n        const newValue = this.#singleInput().value;\n        if (newValue !== this.#value) {\n          this.#value = newValue;\n          this.requestUpdate();\n        }\n        this._setFormValue(this.#value);\n      }\n    }\n  }\n\n  #singleInput(): HTMLInputElement {\n    return this.shadowRoot!.querySelector<HTMLInputElement>('input[type=\"range\"]')!;\n  }\n\n  #rangeInputs(): [HTMLInputElement, HTMLInputElement] {\n    const inputs = this.shadowRoot!.querySelectorAll<HTMLInputElement>('input[type=\"range\"]');\n    return [inputs[0], inputs[1]];\n  }\n\n  protected get _focusControlSelector() {\n    return 'input';\n  }\n\n  protected get _formValue() {\n    return this.range ? `${this.#valueStart},${this.#valueEnd}` : this.#value;\n  }\n\n  protected formResetCallback() {\n    this.#clearAllThumbInputState();\n    // Always request a re-render so the cleared thumb visibility is reflected even when the\n    // reset value equals the current value (the named setter requestUpdate would be a no-op).\n    this.requestUpdate();\n    if (this.range) {\n      this.valueStart = this.#defaultValueStart;\n      this.valueEnd = this.#defaultValueEnd;\n    } else {\n      this.value = this.#defaultValue;\n    }\n  }\n\n  #clearAllThumbInputState() {\n    for (const entry of this.#thumbInputState.values()) {\n      clearTimeout(entry.timer);\n      clearTimeout(entry.debounceTimer);\n      entry.timer = undefined;\n      entry.debounceTimer = undefined;\n      entry.visible = false;\n      entry.focused = false;\n    }\n  }\n\n  /**\n   * Clamps a raw string value to the current [min, max] range.\n   * Empty string is passed through unchanged (represents an in-progress floating input edit).\n   * Non-numeric strings are passed through unchanged.\n   */\n  #clampToRange(rawVal: string): string {\n    if (rawVal === '') {\n      return rawVal;\n    }\n    const num = parseFloat(rawVal);\n    if (isNaN(num)) {\n      return rawVal;\n    }\n    return String(Math.min(this.max, Math.max(this.min, num)));\n  }\n\n  @property()\n  get value() {\n    return this.#value;\n  }\n\n  set value(rawVal: string) {\n    rawVal = this.#clampToRange(rawVal);\n    const oldVal = this.#value;\n    this.#value = rawVal;\n    this._setFormValue(rawVal);\n    this.requestUpdate('value', oldVal);\n  }\n\n  get valueAsNumber() {\n    return parseFloat(this.#value);\n  }\n\n  /**\n   * Enables range mode with two thumbs for selecting a value range\n   */\n  @property({ type: Boolean }) range = false;\n\n  @property({ attribute: 'value-start' })\n  get valueStart() {\n    return this.#valueStart;\n  }\n\n  set valueStart(rawVal: string) {\n    rawVal = this.#clampToRange(rawVal);\n    const oldVal = this.#valueStart;\n    this.#valueStart = rawVal;\n    this._setFormValue(`${rawVal},${this.#valueEnd}`);\n    this.requestUpdate('valueStart', oldVal);\n  }\n\n  @property({ attribute: 'value-end' })\n  get valueEnd() {\n    return this.#valueEnd;\n  }\n\n  set valueEnd(rawVal: string) {\n    rawVal = this.#clampToRange(rawVal);\n    const oldVal = this.#valueEnd;\n    this.#valueEnd = rawVal;\n    this._setFormValue(`${this.#valueStart},${rawVal}`);\n    this.requestUpdate('valueEnd', oldVal);\n  }\n\n  /**\n   * Represents the minimum permitted value\n   */\n  @property({ type: Number }) min = 0;\n\n  /**\n   * Represents the maximum permitted value\n   */\n  @property({ type: Number }) max = 100;\n\n  /**\n   * Represents the stepping interval, used both for user interface and validation purposes\n   */\n  @property({ type: Number }) step = 0;\n\n  /**\n   * Shows the min and max values beneath the slider\n   */\n  @property({ type: Boolean, attribute: 'show-min-max' }) showMinMax = false;\n\n  get #range() {\n    return this.max - this.min;\n  }\n\n  get #progressColor() {\n    return this.disabled ? 'var(--zui-gray)' : 'var(--zui-blue)';\n  }\n\n  #isVisible(flag: ThumbFlag): boolean {\n    return this.#thumbInputState.get(flag)!.visible && !this.disabled;\n  }\n\n  get progress() {\n    return this.#computeProgress(this.#value);\n  }\n\n  get progressStart() {\n    return this.#computeProgress(this.#valueStart);\n  }\n\n  get progressEnd() {\n    return this.#computeProgress(this.#valueEnd);\n  }\n\n  #computeProgress(rawValue: string): number {\n    if (this.#range === 0) {\n      return 0;\n    }\n    const num = parseFloat(rawValue);\n    return isNaN(num) ? 0 : parseFloat((((num - this.min) / this.#range) * 100).toFixed(4));\n  }\n\n  #singleTrackBackground(progress: number): string {\n    const c = this.#progressColor;\n    const stop = ZuiSlider.#thumbPositionCSS(progress);\n    return `linear-gradient(to right, transparent var(--zui-slider-thumb-size), ${c} var(--zui-slider-thumb-size), ${c} ${stop}, var(--zui-gray-200) ${stop}, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))`;\n  }\n\n  #rangeTrackBackground(progressStart: number, progressEnd: number): string {\n    const c = this.#progressColor;\n    const startStop = ZuiSlider.#thumbPositionCSS(progressStart);\n    const endStop = ZuiSlider.#thumbPositionCSS(progressEnd);\n    return `linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-gray-200) var(--zui-slider-thumb-size), var(--zui-gray-200) ${startStop}, ${c} ${startStop}, ${c} ${endStop}, var(--zui-gray-200) ${endStop}, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))`;\n  }\n\n  render() {\n    return html`${this.range ? this.#renderRange() : this.#renderSingle()}${this.#renderMinMaxLabels()}`;\n  }\n\n  #renderSingle() {\n    const progress = this.progress;\n    return html`\n      <div class=\"single-wrapper\">\n        <input\n          aria-label=\"Slider value\"\n          style=${styleMap({ background: this.#singleTrackBackground(progress) })}\n          type=\"range\"\n          .min=\"${String(this.min)}\"\n          .max=\"${String(this.max)}\"\n          .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n          .value=\"${this.#value}\"\n          ?disabled=\"${this.disabled || this.readOnly}\"\n          @input=\"${this.#onInput}\"\n          @change=\"${this.#onChange}\"\n          @pointerenter=\"${this.#h.thumb.show}\"\n          @pointerleave=\"${this.#h.thumb.hide}\"\n          @focus=\"${this.#h.thumb.show}\"\n          @blur=\"${this.#h.thumb.hide}\"\n        />\n        ${this.#renderStepDots()}\n        ${this.#renderFloatingInput(\n          this.#value,\n          this.#onThumbFloatingInput,\n          this.#onThumbFloatingChange,\n          'thumb',\n          this.#isVisible('thumb'),\n          progress\n        )}\n      </div>\n    `;\n  }\n\n  #renderRange() {\n    const progressStart = this.progressStart;\n    const progressEnd = this.progressEnd;\n    return html`\n      <div\n        class=\"range-wrapper\"\n        style=${styleMap({ background: this.#rangeTrackBackground(progressStart, progressEnd) })}\n      >\n        ${this.#renderStepDots()}${this.#renderRangeInput('start')}\n        ${this.#renderFloatingInput(\n          this.#valueStart,\n          this.#onStartThumbFloatingInput,\n          this.#onStartThumbFloatingChange,\n          'startThumb',\n          this.#isVisible('startThumb'),\n          progressStart\n        )}\n        ${this.#renderRangeInput('end')}\n        ${this.#renderFloatingInput(\n          this.#valueEnd,\n          this.#onEndThumbFloatingInput,\n          this.#onEndThumbFloatingChange,\n          'endThumb',\n          this.#isVisible('endThumb'),\n          progressEnd\n        )}\n      </div>\n    `;\n  }\n\n  #renderRangeInput(which: 'start' | 'end') {\n    const flag: ThumbFlag = which === 'start' ? 'startThumb' : 'endThumb';\n    const val = which === 'start' ? this.#valueStart : this.#valueEnd;\n    const onInput = which === 'start' ? this.#onRangeStartInput : this.#onRangeEndInput;\n    const h = this.#h[flag];\n    // live() is required: when #onRangeInput snaps the DOM value back via direct input.value\n    // assignment (drag past the other thumb), there is no state change → no re-render. live()\n    // forces Lit to re-read the current DOM value and re-sync it on every render.\n    return html`\n      <input\n        aria-label=\"${which === 'start' ? 'Range start' : 'Range end'}\"\n        class=\"range-${which}\"\n        type=\"range\"\n        .min=\"${String(this.min)}\"\n        .max=\"${String(this.max)}\"\n        .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n        .value=\"${live(val)}\"\n        ?disabled=\"${this.disabled || this.readOnly}\"\n        @input=\"${onInput}\"\n        @change=\"${this.#onRangeChange}\"\n        @pointerenter=\"${h.show}\"\n        @pointerleave=\"${h.hide}\"\n        @focus=\"${h.show}\"\n        @blur=\"${h.hide}\"\n      />\n    `;\n  }\n\n  #renderFloatingInput(\n    val: string,\n    onInput: (e: Event) => void,\n    onFloatingChange: (e: Event) => void,\n    flag: ThumbFlag,\n    visible: boolean,\n    progress: number\n  ) {\n    const h = this.#h[flag];\n    // live() is required on the number input: when the debounced setter clamps a value to the\n    // same string it already holds (e.g. typing 150 when max=100 clamps back to '100'), no\n    // reactive property change occurs and Lit skips the DOM update. live() forces a re-read.\n    return html`\n      <div\n        class=${classMap({ 'thumb-input': true, 'thumb-input--visible': visible })}\n        style=${styleMap({ left: ZuiSlider.#thumbPositionCSS(progress) })}\n        @pointerenter=\"${h.show}\"\n        @pointerleave=\"${h.hide}\"\n      >\n        <input\n          aria-label=\"${flag === 'startThumb'\n            ? 'Range start value'\n            : flag === 'endThumb'\n            ? 'Range end value'\n            : 'Slider value'}\"\n          type=\"number\"\n          .value=\"${live(val)}\"\n          .min=\"${String(this.min)}\"\n          .max=\"${String(this.max)}\"\n          .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n          ?disabled=\"${this.disabled}\"\n          ?readonly=\"${this.readOnly}\"\n          @input=\"${onInput}\"\n          @change=\"${onFloatingChange}\"\n          @focus=\"${h.focus}\"\n          @blur=\"${h.blur}\"\n        />\n      </div>\n    `;\n  }\n\n  #renderStepDots() {\n    if (this.step <= 0 || this.#range === 0) {\n      return nothing;\n    }\n    const count = Math.round(this.#range / this.step);\n    if (count > 100) {\n      return nothing;\n    }\n    const dots: TemplateResult[] = [];\n    for (let i = 0; i <= count; i++) {\n      let left: string;\n      if (i === 0) {\n        left = 'var(--zui-slider-thumb-size)';\n      } else if (i === count) {\n        left = 'calc(100% - var(--zui-slider-thumb-size))';\n      } else {\n        const pos = parseFloat((((i * this.step) / this.#range) * 100).toFixed(4));\n        left = ZuiSlider.#thumbPositionCSS(pos);\n      }\n      dots.push(html`<span class=\"step-dot\" style=\"left: ${left}\"></span>`);\n    }\n    return html`<div class=\"step-dots\">${dots}</div>`;\n  }\n\n  #renderMinMaxLabels() {\n    if (!this.showMinMax) {\n      return nothing;\n    }\n    return html`\n      <div class=\"min-max-labels\">\n        <span class=\"min-max-label\">${this.min}</span>\n        <span class=\"min-max-label\">${this.max}</span>\n      </div>\n    `;\n  }\n\n  #onInput(e: Event) {\n    if (this.readOnly) {\n      return;\n    }\n    this.value = (e.target as HTMLInputElement).value;\n  }\n\n  #onChange() {\n    this.dispatchEvent(new CustomEvent('change', { detail: this.#value, bubbles: true }));\n  }\n\n  #processFloatingValue(raw: number): string {\n    const stepDecimals = this.step > 0 ? (String(this.step).split('.')[1] ?? '').length : 0;\n    const stepped = this.step > 0 ? Math.round((raw - this.min) / this.step) * this.step + this.min : raw;\n    const clamped = Math.min(this.max, Math.max(this.min, stepped));\n    return stepDecimals > 0 ? clamped.toFixed(stepDecimals) : String(Math.round(clamped));\n  }\n\n  #makeFloatingChange(flag: ThumbFlag, setter: (val: string) => void, dispatch: () => void) {\n    return (e: Event) => {\n      if (this.readOnly) {\n        return;\n      }\n      const input = e.target as HTMLInputElement;\n      if (input.value === '') {\n        return;\n      }\n      const entry = this.#thumbInputState.get(flag)!;\n      clearTimeout(entry.debounceTimer);\n      entry.debounceTimer = undefined;\n      setter(this.#processFloatingValue(parseFloat(input.value)));\n      dispatch();\n    };\n  }\n\n  #onFloatingInput(flag: ThumbFlag, setter: (val: string) => void) {\n    return (e: Event) => {\n      if (this.readOnly) {\n        return;\n      }\n      const input = e.target as HTMLInputElement;\n      if (input.value === '') {\n        return;\n      }\n      const raw = parseFloat(input.value);\n      const entry = this.#thumbInputState.get(flag)!;\n      clearTimeout(entry.debounceTimer);\n      entry.debounceTimer = setTimeout(() => setter(this.#processFloatingValue(raw)), 300);\n    };\n  }\n\n  #onRangeInput(which: 'start' | 'end') {\n    return (e: Event) => {\n      if (this.readOnly) {\n        return;\n      }\n      const input = e.target as HTMLInputElement;\n      if (which === 'start') {\n        if (parseFloat(input.value) >= parseFloat(this.#valueEnd)) {\n          input.value = this.#valueStart;\n          return;\n        }\n        this.valueStart = input.value;\n      } else {\n        if (parseFloat(input.value) <= parseFloat(this.#valueStart)) {\n          input.value = this.#valueEnd;\n          return;\n        }\n        this.valueEnd = input.value;\n      }\n    };\n  }\n\n  #onRangeChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { valueStart: this.#valueStart, valueEnd: this.#valueEnd },\n        bubbles: true,\n      })\n    );\n  }\n\n  #showThumbInput(flag: ThumbFlag) {\n    if (this.disabled) {\n      return;\n    }\n    const entry = this.#thumbInputState.get(flag)!;\n    clearTimeout(entry.timer);\n    entry.timer = undefined;\n    entry.visible = true;\n    this.requestUpdate();\n  }\n\n  #scheduleHideThumbInput(flag: ThumbFlag) {\n    const entry = this.#thumbInputState.get(flag)!;\n    clearTimeout(entry.timer);\n    entry.timer = setTimeout(() => {\n      if (!entry.focused) {\n        entry.visible = false;\n        this.requestUpdate();\n      }\n    }, 100);\n  }\n\n  #focusFloatingInput(flag: ThumbFlag) {\n    if (this.disabled) {\n      return;\n    }\n    this.#showThumbInput(flag);\n    this.#thumbInputState.get(flag)!.focused = true;\n  }\n\n  #blurFloatingInput(flag: ThumbFlag) {\n    const entry = this.#thumbInputState.get(flag)!;\n    entry.focused = false;\n    this.#scheduleHideThumbInput(flag);\n  }\n\n  // Maps a 0–100 progress value to a CSS multiplier for --zui-slider-thumb-size so that\n  // `progress% + thumbSize * offset` lands on the thumb center within the inset wrapper.\n  // At 0%: offset=1.5 → thumbSize*1.5 (thumb center at min). At 100%: offset=-1.5 → -thumbSize*1.5 (thumb center at max).\n  static #thumbCenterOffset(progress: number): number {\n    return 1.5 - (3 * progress) / 100;\n  }\n\n  static #thumbPositionCSS(progress: number): string {\n    return `calc(${progress}% + var(--zui-slider-thumb-size) * ${ZuiSlider.#thumbCenterOffset(progress)})`;\n  }\n}\n\nwindow.customElements.define('zui-slider', ZuiSlider);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-slider': ZuiSlider;\n  }\n}\n"]}
+{"version":3,"file":"zui-slider.js","sourceRoot":"","sources":["../src/zui-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiFormAssociatedElement } from '@zywave/zui-base';\nimport { html, nothing, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './zui-slider-css.js';\n\ntype ThumbFlag = 'thumb' | 'startThumb' | 'endThumb';\n\n/**\n * A range form control for choosing values along a slider.\n * @element zui-slider\n *\n * @attr {string | null} [name=null] - The name of this element that is associated with form submission\n * @attr {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @attr {boolean} [readonly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @attr {number} [value=50] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @attr {boolean} [range=false] - Enables range mode with two thumbs for selecting a range\n * @attr {number} [value-start=0] - Represents the start (lower) value in range mode\n * @attr {number} [value-end=100] - Represents the end (upper) value in range mode\n * @attr {number} [min=0] - Represents the minimum permitted value\n * @attr {number} [max=100] - Represents the maximum permitted value\n * @attr {number} [step=0] - Represents the stepping interval; 0 means any value is allowed\n * @attr {boolean} [show-min-max=false] - Shows the min and max values beneath the slider\n *\n * @prop {string | null} [name=null] - The name of this element that is associated with form submission\n * @prop {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission\n * @prop {boolean} [readOnly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission\n * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document\n * @prop {number} [valueAsNumber=50] - Returns the value as a number. Invalid or non-numeric values are clamped to min; empty string (representing an in-progress edit) returns NaN\n * @prop {string} [value='50'] - Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control\n * @prop {number} [progress=50] - Determines visual placement of the slider thumb along the line (single mode)\n * @prop {boolean} [range=false] - Enables range mode with two thumbs for selecting a range\n * @prop {string} [valueStart='0'] - Represents the start (lower) value in range mode\n * @prop {string} [valueEnd='100'] - Represents the end (upper) value in range mode\n * @prop {number} [progressStart=0] - Determines visual placement of the start thumb in range mode\n * @prop {number} [progressEnd=100] - Determines visual placement of the end thumb in range mode\n * @prop {number} [min=0] - Represents the minimum permitted value\n * @prop {number} [max=100] - Represents the maximum permitted value\n * @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed\n * @prop {boolean} [showMinMax=false] - Shows the min and max values beneath the slider\n *\n * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each slider thumb\n *\n * @event {CustomEvent} change - Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }\n */\nexport class ZuiSlider extends ZuiFormAssociatedElement {\n  #defaultValue: string = '50';\n  #defaultValueStart: string = '0';\n  #defaultValueEnd: string = '100';\n\n  #value: string = '50';\n  #valueStart: string = '0';\n  #valueEnd: string = '100';\n\n  #thumbInputState = new Map<\n    ThumbFlag,\n    {\n      visible: boolean;\n      focused: boolean;\n      timer?: ReturnType<typeof setTimeout>;\n      debounceTimer?: ReturnType<typeof setTimeout>;\n    }\n  >([\n    ['thumb', { visible: false, focused: false }],\n    ['startThumb', { visible: false, focused: false }],\n    ['endThumb', { visible: false, focused: false }],\n  ]);\n\n  // Pre-bound floating input handlers cached to avoid new function references on every render\n  #onThumbFloatingInput = this.#onFloatingInput('thumb', (v) => (this.value = v));\n  #onStartThumbFloatingInput = this.#onFloatingInput('startThumb', (v) => (this.valueStart = v));\n  #onEndThumbFloatingInput = this.#onFloatingInput('endThumb', (v) => (this.valueEnd = v));\n\n  // Cached floating input change handlers — flush debounce and dispatch immediately on commit (Enter/blur)\n  #onThumbFloatingChange = this.#makeFloatingChange(\n    'thumb',\n    (v) => (this.value = v),\n    () => this.#onChange()\n  );\n  #onStartThumbFloatingChange = this.#makeFloatingChange(\n    'startThumb',\n    (v) => (this.valueStart = v),\n    () => this.#onRangeChange()\n  );\n  #onEndThumbFloatingChange = this.#makeFloatingChange(\n    'endThumb',\n    (v) => (this.valueEnd = v),\n    () => this.#onRangeChange()\n  );\n\n  // Cached range drag input handlers\n  #onRangeStartInput = this.#onRangeInput('start');\n  #onRangeEndInput = this.#onRangeInput('end');\n\n  // Cached pointer/focus handlers per thumb — prevents new closures on every render\n  #h: Record<ThumbFlag, { show: () => void; hide: () => void; focus: () => void; blur: () => void }> = {\n    thumb: {\n      show: () => this.#showThumbInput('thumb'),\n      hide: () => this.#scheduleHideThumbInput('thumb'),\n      focus: () => this.#focusFloatingInput('thumb'),\n      blur: () => this.#blurFloatingInput('thumb'),\n    },\n    startThumb: {\n      show: () => this.#showThumbInput('startThumb'),\n      hide: () => this.#scheduleHideThumbInput('startThumb'),\n      focus: () => this.#focusFloatingInput('startThumb'),\n      blur: () => this.#blurFloatingInput('startThumb'),\n    },\n    endThumb: {\n      show: () => this.#showThumbInput('endThumb'),\n      hide: () => this.#scheduleHideThumbInput('endThumb'),\n      focus: () => this.#focusFloatingInput('endThumb'),\n      blur: () => this.#blurFloatingInput('endThumb'),\n    },\n  };\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateComplete.then(() => {\n      if (this.range) {\n        const [startInput, endInput] = this.#rangeInputs();\n        this.#valueStart = startInput.value;\n        this.#valueEnd = endInput.value;\n        this.#defaultValueStart = startInput.value;\n        this.#defaultValueEnd = endInput.value;\n        this._setFormValue(`${startInput.value},${endInput.value}`);\n      } else {\n        const input = this.#singleInput();\n        this.#value = input.value;\n        this.#defaultValue = input.value;\n        this._setFormValue(input.value);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#clearAllThumbInputState();\n    // Schedule a re-render so the cleared visibility state is reflected in the DOM.\n    // Lit defers this render until the element reconnects if it is currently disconnected.\n    this.requestUpdate();\n  }\n\n  protected updated(changed: Map<PropertyKey, unknown>) {\n    if (changed.has('disabled') && this.disabled) {\n      this.#clearAllThumbInputState();\n    }\n    if (changed.has('min') || changed.has('max')) {\n      // The native inputs have already clamped (and step-snapped) their values to the new bounds.\n      // Read them back and sync internal state + form value. If the value changed, request a\n      // re-render so the floating input (which binds to #value/#valueStart/#valueEnd) stays in sync.\n      if (this.range) {\n        const [startInput, endInput] = this.#rangeInputs();\n        const newStart = startInput.value;\n        const newEnd = endInput.value;\n        if (newStart !== this.#valueStart || newEnd !== this.#valueEnd) {\n          this.#valueStart = newStart;\n          this.#valueEnd = newEnd;\n          this.requestUpdate();\n        }\n        this._setFormValue(`${this.#valueStart},${this.#valueEnd}`);\n      } else {\n        const newValue = this.#singleInput().value;\n        if (newValue !== this.#value) {\n          this.#value = newValue;\n          this.requestUpdate();\n        }\n        this._setFormValue(this.#value);\n      }\n    }\n  }\n\n  #singleInput(): HTMLInputElement {\n    return this.shadowRoot!.querySelector<HTMLInputElement>('input[type=\"range\"]')!;\n  }\n\n  #rangeInputs(): [HTMLInputElement, HTMLInputElement] {\n    const inputs = this.shadowRoot!.querySelectorAll<HTMLInputElement>('input[type=\"range\"]');\n    return [inputs[0], inputs[1]];\n  }\n\n  protected get _focusControlSelector() {\n    return 'input';\n  }\n\n  protected get _formValue() {\n    return this.range ? `${this.#valueStart},${this.#valueEnd}` : this.#value;\n  }\n\n  protected formResetCallback() {\n    this.#clearAllThumbInputState();\n    // Always request a re-render so the cleared thumb visibility is reflected even when the\n    // reset value equals the current value (the named setter requestUpdate would be a no-op).\n    this.requestUpdate();\n    if (this.range) {\n      this.valueStart = this.#defaultValueStart;\n      this.valueEnd = this.#defaultValueEnd;\n    } else {\n      this.value = this.#defaultValue;\n    }\n  }\n\n  #clearAllThumbInputState() {\n    for (const entry of this.#thumbInputState.values()) {\n      clearTimeout(entry.timer);\n      clearTimeout(entry.debounceTimer);\n      entry.timer = undefined;\n      entry.debounceTimer = undefined;\n      entry.visible = false;\n      entry.focused = false;\n    }\n  }\n\n  /**\n   * Clamps a raw string value to the current [min, max] range.\n   * Empty string is passed through unchanged (represents an in-progress floating input edit).\n   * Non-numeric strings are passed through unchanged.\n   */\n  #clampToRange(rawVal: string): string {\n    if (rawVal === '') {\n      return rawVal;\n    }\n    const num = parseFloat(rawVal);\n    if (isNaN(num)) {\n      return rawVal;\n    }\n    return String(Math.min(this.max, Math.max(this.min, num)));\n  }\n\n  @property()\n  get value() {\n    return this.#value;\n  }\n\n  set value(rawVal: string) {\n    rawVal = this.#clampToRange(rawVal);\n    const oldVal = this.#value;\n    this.#value = rawVal;\n    this._setFormValue(rawVal);\n    this.requestUpdate('value', oldVal);\n  }\n\n  get valueAsNumber() {\n    return parseFloat(this.#value);\n  }\n\n  /**\n   * Enables range mode with two thumbs for selecting a value range\n   */\n  @property({ type: Boolean }) range = false;\n\n  @property({ attribute: 'value-start' })\n  get valueStart() {\n    return this.#valueStart;\n  }\n\n  set valueStart(rawVal: string) {\n    rawVal = this.#clampToRange(rawVal);\n    const oldVal = this.#valueStart;\n    this.#valueStart = rawVal;\n    this._setFormValue(`${rawVal},${this.#valueEnd}`);\n    this.requestUpdate('valueStart', oldVal);\n  }\n\n  @property({ attribute: 'value-end' })\n  get valueEnd() {\n    return this.#valueEnd;\n  }\n\n  set valueEnd(rawVal: string) {\n    rawVal = this.#clampToRange(rawVal);\n    const oldVal = this.#valueEnd;\n    this.#valueEnd = rawVal;\n    this._setFormValue(`${this.#valueStart},${rawVal}`);\n    this.requestUpdate('valueEnd', oldVal);\n  }\n\n  /**\n   * Represents the minimum permitted value\n   */\n  @property({ type: Number }) min = 0;\n\n  /**\n   * Represents the maximum permitted value\n   */\n  @property({ type: Number }) max = 100;\n\n  /**\n   * Represents the stepping interval, used both for user interface and validation purposes\n   */\n  @property({ type: Number }) step = 0;\n\n  /**\n   * Shows the min and max values beneath the slider\n   */\n  @property({ type: Boolean, attribute: 'show-min-max' }) showMinMax = false;\n\n  get #range() {\n    return this.max - this.min;\n  }\n\n  get #progressColor() {\n    return this.disabled ? 'var(--zui-gray)' : 'var(--zui-blue)';\n  }\n\n  #isVisible(flag: ThumbFlag): boolean {\n    return this.#thumbInputState.get(flag)!.visible && !this.disabled;\n  }\n\n  get progress() {\n    return this.#computeProgress(this.#value);\n  }\n\n  get progressStart() {\n    return this.#computeProgress(this.#valueStart);\n  }\n\n  get progressEnd() {\n    return this.#computeProgress(this.#valueEnd);\n  }\n\n  #computeProgress(rawValue: string): number {\n    if (this.#range === 0) {\n      return 0;\n    }\n    const num = parseFloat(rawValue);\n    return isNaN(num) ? 0 : parseFloat((((num - this.min) / this.#range) * 100).toFixed(4));\n  }\n\n  #singleTrackBackground(progress: number): string {\n    const c = this.#progressColor;\n    const stop = ZuiSlider.#thumbPositionCSS(progress);\n    return `linear-gradient(to right, transparent var(--zui-slider-thumb-size), ${c} var(--zui-slider-thumb-size), ${c} ${stop}, var(--zui-gray-200) ${stop}, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))`;\n  }\n\n  #rangeTrackBackground(progressStart: number, progressEnd: number): string {\n    const c = this.#progressColor;\n    const startStop = ZuiSlider.#thumbPositionCSS(progressStart);\n    const endStop = ZuiSlider.#thumbPositionCSS(progressEnd);\n    return `linear-gradient(to right, transparent var(--zui-slider-thumb-size), var(--zui-gray-200) var(--zui-slider-thumb-size), var(--zui-gray-200) ${startStop}, ${c} ${startStop}, ${c} ${endStop}, var(--zui-gray-200) ${endStop}, var(--zui-gray-200) calc(100% - var(--zui-slider-thumb-size)), transparent calc(100% - var(--zui-slider-thumb-size)))`;\n  }\n\n  render() {\n    return html`${this.range ? this.#renderRange() : this.#renderSingle()}${this.#renderMinMaxLabels()}`;\n  }\n\n  #renderSingle() {\n    const progress = this.progress;\n    return html`\n      <div class=\"single-wrapper\">\n        <input\n          aria-label=\"Slider value\"\n          style=${styleMap({ '--zui-slider-track-bg': this.#singleTrackBackground(progress) })}\n          type=\"range\"\n          .min=\"${String(this.min)}\"\n          .max=\"${String(this.max)}\"\n          .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n          .value=\"${this.#value}\"\n          ?disabled=\"${this.disabled || this.readOnly}\"\n          @input=\"${this.#onInput}\"\n          @change=\"${this.#onChange}\"\n          @pointerenter=\"${this.#h.thumb.show}\"\n          @pointerleave=\"${this.#h.thumb.hide}\"\n          @focus=\"${this.#h.thumb.show}\"\n          @blur=\"${this.#h.thumb.hide}\"\n        />\n        ${this.#renderFloatingInput(\n          this.#value,\n          this.#onThumbFloatingInput,\n          this.#onThumbFloatingChange,\n          'thumb',\n          this.#isVisible('thumb'),\n          progress\n        )}\n        ${this.#renderStepDots()}\n      </div>\n    `;\n  }\n\n  #renderRange() {\n    const progressStart = this.progressStart;\n    const progressEnd = this.progressEnd;\n    return html`\n      <div class=\"range-wrapper\" @click=\"${this.#onTrackClick}\">\n        ${this.#renderRangeInput('start', this.#rangeTrackBackground(progressStart, progressEnd))}\n        ${this.#renderFloatingInput(\n          this.#valueStart,\n          this.#onStartThumbFloatingInput,\n          this.#onStartThumbFloatingChange,\n          'startThumb',\n          this.#isVisible('startThumb'),\n          progressStart\n        )}\n        ${this.#renderRangeInput('end')}\n        ${this.#renderFloatingInput(\n          this.#valueEnd,\n          this.#onEndThumbFloatingInput,\n          this.#onEndThumbFloatingChange,\n          'endThumb',\n          this.#isVisible('endThumb'),\n          progressEnd\n        )}\n        ${this.#renderStepDots()}\n      </div>\n    `;\n  }\n\n  #renderRangeInput(which: 'start' | 'end', trackBg?: string) {\n    const flag: ThumbFlag = which === 'start' ? 'startThumb' : 'endThumb';\n    const val = which === 'start' ? this.#valueStart : this.#valueEnd;\n    const onInput = which === 'start' ? this.#onRangeStartInput : this.#onRangeEndInput;\n    const h = this.#h[flag];\n    // live() is required: when #onRangeInput snaps the DOM value back via direct input.value\n    // assignment (drag past the other thumb), there is no state change → no re-render. live()\n    // forces Lit to re-read the current DOM value and re-sync it on every render.\n    return html`\n      <input\n        aria-label=\"${which === 'start' ? 'Range start' : 'Range end'}\"\n        class=\"range-${which}\"\n        type=\"range\"\n        style=${trackBg ? styleMap({ '--zui-slider-track-bg': trackBg }) : nothing}\n        .min=\"${String(this.min)}\"\n        .max=\"${String(this.max)}\"\n        .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n        .value=\"${live(val)}\"\n        ?disabled=\"${this.disabled || this.readOnly}\"\n        @input=\"${onInput}\"\n        @change=\"${this.#onRangeChange}\"\n        @pointerenter=\"${h.show}\"\n        @pointerleave=\"${h.hide}\"\n        @focus=\"${h.show}\"\n        @blur=\"${h.hide}\"\n      />\n    `;\n  }\n\n  #renderFloatingInput(\n    val: string,\n    onInput: (e: Event) => void,\n    onFloatingChange: (e: Event) => void,\n    flag: ThumbFlag,\n    visible: boolean,\n    progress: number\n  ) {\n    const h = this.#h[flag];\n    // live() is required on the number input: when the debounced setter clamps a value to the\n    // same string it already holds (e.g. typing 150 when max=100 clamps back to '100'), no\n    // reactive property change occurs and Lit skips the DOM update. live() forces a re-read.\n    return html`\n      <div\n        class=${classMap({ 'thumb-input': true, 'thumb-input--visible': visible })}\n        style=${styleMap({ left: ZuiSlider.#thumbPositionCSS(progress) })}\n        @pointerenter=\"${h.show}\"\n        @pointerleave=\"${h.hide}\"\n      >\n        <input\n          aria-label=\"${flag === 'startThumb'\n            ? 'Range start value'\n            : flag === 'endThumb'\n            ? 'Range end value'\n            : 'Slider value'}\"\n          type=\"number\"\n          .value=\"${live(val)}\"\n          .min=\"${String(this.min)}\"\n          .max=\"${String(this.max)}\"\n          .step=\"${this.step > 0 ? String(this.step) : '1'}\"\n          ?disabled=\"${this.disabled}\"\n          ?readonly=\"${this.readOnly}\"\n          @input=\"${onInput}\"\n          @change=\"${onFloatingChange}\"\n          @focus=\"${h.focus}\"\n          @blur=\"${h.blur}\"\n        />\n      </div>\n    `;\n  }\n\n  #renderStepDots() {\n    if (this.step <= 0 || this.#range === 0) {\n      return nothing;\n    }\n    const count = Math.round(this.#range / this.step);\n    if (count > 100) {\n      return nothing;\n    }\n    const dots: TemplateResult[] = [];\n    for (let i = 0; i <= count; i++) {\n      let left: string;\n      if (i === 0) {\n        left = 'var(--zui-slider-thumb-size)';\n      } else if (i === count) {\n        left = 'calc(100% - var(--zui-slider-thumb-size))';\n      } else {\n        const pos = parseFloat((((i * this.step) / this.#range) * 100).toFixed(4));\n        left = ZuiSlider.#thumbPositionCSS(pos);\n      }\n      dots.push(html`<span class=\"step-dot\" style=\"left: ${left}\"></span>`);\n    }\n    return html`<div class=\"step-dots\">${dots}</div>`;\n  }\n\n  #renderMinMaxLabels() {\n    if (!this.showMinMax) {\n      return nothing;\n    }\n    return html`\n      <div class=\"min-max-labels\">\n        <span class=\"min-max-label\">${this.min}</span>\n        <span class=\"min-max-label\">${this.max}</span>\n      </div>\n    `;\n  }\n\n  #onInput(e: Event) {\n    if (this.readOnly) {\n      return;\n    }\n    this.value = (e.target as HTMLInputElement).value;\n  }\n\n  #onChange() {\n    this.dispatchEvent(new CustomEvent('change', { detail: this.#value, bubbles: true }));\n  }\n\n  #processFloatingValue(raw: number): string {\n    const stepDecimals = this.step > 0 ? (String(this.step).split('.')[1] ?? '').length : 0;\n    const stepped = this.step > 0 ? Math.round((raw - this.min) / this.step) * this.step + this.min : raw;\n    const clamped = Math.min(this.max, Math.max(this.min, stepped));\n    return stepDecimals > 0 ? clamped.toFixed(stepDecimals) : String(Math.round(clamped));\n  }\n\n  #makeFloatingChange(flag: ThumbFlag, setter: (val: string) => void, dispatch: () => void) {\n    return (e: Event) => {\n      if (this.readOnly) {\n        return;\n      }\n      const input = e.target as HTMLInputElement;\n      if (input.value === '') {\n        return;\n      }\n      const entry = this.#thumbInputState.get(flag)!;\n      clearTimeout(entry.debounceTimer);\n      entry.debounceTimer = undefined;\n      setter(this.#processFloatingValue(parseFloat(input.value)));\n      dispatch();\n    };\n  }\n\n  #onFloatingInput(flag: ThumbFlag, setter: (val: string) => void) {\n    return (e: Event) => {\n      if (this.readOnly) {\n        return;\n      }\n      const input = e.target as HTMLInputElement;\n      if (input.value === '') {\n        return;\n      }\n      const raw = parseFloat(input.value);\n      const entry = this.#thumbInputState.get(flag)!;\n      clearTimeout(entry.debounceTimer);\n      entry.debounceTimer = setTimeout(() => setter(this.#processFloatingValue(raw)), 300);\n    };\n  }\n\n  #onRangeInput(which: 'start' | 'end') {\n    return (e: Event) => {\n      if (this.readOnly) {\n        return;\n      }\n      const input = e.target as HTMLInputElement;\n      if (which === 'start') {\n        if (parseFloat(input.value) >= parseFloat(this.#valueEnd)) {\n          input.value = this.#valueStart;\n          return;\n        }\n        this.valueStart = input.value;\n      } else {\n        if (parseFloat(input.value) <= parseFloat(this.#valueStart)) {\n          input.value = this.#valueEnd;\n          return;\n        }\n        this.valueEnd = input.value;\n      }\n    };\n  }\n\n  #onRangeChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { valueStart: this.#valueStart, valueEnd: this.#valueEnd },\n        bubbles: true,\n      })\n    );\n  }\n\n  #onTrackClick(e: MouseEvent) {\n    if (this.disabled || this.readOnly) {\n      return;\n    }\n\n    const wrapper = e.currentTarget as HTMLElement;\n    const rect = wrapper.getBoundingClientRect();\n    // Thumb diameter is 3× the custom property; radius is 1.5×. Track is inset by one radius each side.\n    const thumbRadius = 1.5 * parseFloat(getComputedStyle(this).getPropertyValue('--zui-slider-thumb-size'));\n    const trackLeft = rect.left + thumbRadius;\n    const effectiveWidth = rect.width - 2 * thumbRadius;\n    const fraction = Math.max(0, Math.min(1, (e.clientX - trackLeft) / effectiveWidth));\n    const rawValue = this.min + fraction * (this.max - this.min);\n\n    // Ignore clicks that land within a thumb's hit area — those bubble up from native input\n    // interactions and should not be treated as track clicks.\n    const startX = trackLeft + (this.progressStart / 100) * effectiveWidth;\n    const endX = trackLeft + (this.progressEnd / 100) * effectiveWidth;\n    if (Math.abs(e.clientX - startX) <= thumbRadius || Math.abs(e.clientX - endX) <= thumbRadius) {\n      return;\n    }\n\n    const snappedStr = this.#processFloatingValue(rawValue);\n    const snapped = parseFloat(snappedStr);\n    const startNum = parseFloat(this.#valueStart);\n    const endNum = parseFloat(this.#valueEnd);\n\n    // Move whichever thumb is closer to the click; prefer start on a tie\n    if (Math.abs(rawValue - startNum) <= Math.abs(rawValue - endNum)) {\n      if (snapped < endNum) {\n        this.valueStart = snappedStr;\n        this.#onRangeChange();\n      }\n    } else {\n      if (snapped > startNum) {\n        this.valueEnd = snappedStr;\n        this.#onRangeChange();\n      }\n    }\n  }\n\n  #showThumbInput(flag: ThumbFlag) {\n    if (this.disabled) {\n      return;\n    }\n    const entry = this.#thumbInputState.get(flag)!;\n    clearTimeout(entry.timer);\n    entry.timer = undefined;\n    entry.visible = true;\n    this.requestUpdate();\n  }\n\n  #scheduleHideThumbInput(flag: ThumbFlag) {\n    const entry = this.#thumbInputState.get(flag)!;\n    clearTimeout(entry.timer);\n    entry.timer = setTimeout(() => {\n      if (!entry.focused) {\n        entry.visible = false;\n        this.requestUpdate();\n      }\n    }, 100);\n  }\n\n  #focusFloatingInput(flag: ThumbFlag) {\n    if (this.disabled) {\n      return;\n    }\n    this.#showThumbInput(flag);\n    this.#thumbInputState.get(flag)!.focused = true;\n  }\n\n  #blurFloatingInput(flag: ThumbFlag) {\n    const entry = this.#thumbInputState.get(flag)!;\n    entry.focused = false;\n    this.#scheduleHideThumbInput(flag);\n  }\n\n  // Maps a 0–100 progress value to a CSS multiplier for --zui-slider-thumb-size so that\n  // `progress% + thumbSize * offset` lands on the thumb center within the inset wrapper.\n  // At 0%: offset=1.5 → thumbSize*1.5 (thumb center at min). At 100%: offset=-1.5 → -thumbSize*1.5 (thumb center at max).\n  static #thumbCenterOffset(progress: number): number {\n    return 1.5 - (3 * progress) / 100;\n  }\n\n  static #thumbPositionCSS(progress: number): string {\n    return `calc(${progress}% + var(--zui-slider-thumb-size) * ${ZuiSlider.#thumbCenterOffset(progress)})`;\n  }\n}\n\nwindow.customElements.define('zui-slider', ZuiSlider);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-slider': ZuiSlider;\n  }\n}\n"]}

package/lab.html

@@ -46,9 +46,6 @@
   <h3>zui slider negative values</h3>
   <zui-slider id="negative" value="0" min="-50" max="50"></zui-slider>
 
-  <h3>zui slider decimals + custom thumb size</h3>
-  <zui-slider id="decimals" step="0.01" value="50.01"></zui-slider>
-
   <h3>zui slider no text</h3>
   <zui-slider id="text" no-text></zui-slider>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zywave/zui-slider",
-  "version": "4.4.0-pre.1",
+  "version": "4.4.0-pre.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "UNLICENSED",
@@ -27,5 +27,5 @@
   "devDependencies": {
     "@zywave/zui-input": "^4.2.3"
   },
-  "gitHead": "db515ad35b2532f6e15d6414f6fdf132df38ee09"
+  "gitHead": "a50a61d9903db3e0a032d894708c2f3a9c5ffb39"
 }

package/src/css/zui-slider.fouc.scss

@@ -6,7 +6,8 @@ zui-slider {
 
     position: relative;
     display: block;
-    padding: calc(var(--zui-slider-thumb-size) / 2) 0;
+    margin: 0 calc(var(--zui-slider-thumb-size) * -1);
+    padding: calc(var(--zui-slider-thumb-size) / 2 - #{rem(2)}) 0;
 
     // Track — filled to default 50% (CSS cannot read the value attribute for positioning)
     &::before {

package/src/zui-slider-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 
-export const style = css`:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block;padding:calc(var(--zui-slider-thumb-size)/2) 0}:host .single-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:.25rem;margin:0;background:var(--zui-gray-200);border-radius:.1875rem;outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out;-webkit-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border:0;border-radius:50%;box-shadow:none;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:disabled{cursor:not-allowed}:host input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{position:relative;display:flex;height:.25rem;align-items:center;overflow:visible;margin:.3125rem calc(var(--zui-slider-thumb-size)*-1)}:host .range-wrapper input[type=range]{position:absolute;width:100%;height:var(--zui-slider-thumb-size);background:rgba(0,0,0,0);transform:translateY(-50%);pointer-events:none}@supports(-moz-appearance: none){:host .range-wrapper input[type=range]{top:50%;left:0}}:host .range-wrapper input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-webkit-slider-thumb{margin-top:.125rem;cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-track{height:.25rem;background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .range-wrapper input[type=range]::-moz-range-thumb{cursor:grab;pointer-events:all}:host .range-wrapper input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:active::-moz-range-thumb{cursor:grabbing}:host .range-wrapper input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;pointer-events:all}:host .range-wrapper .thumb-input{bottom:calc(var(--zui-slider-thumb-size)*2 - 0.0625rem)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) .range-wrapper{cursor:not-allowed}:host([disabled]) .step-dot{background-color:var(--zui-gray)}`;
+export const style = css`:host .thumb-input input[type=number]{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input[type=number]::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input[type=number]:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input[type=number]:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input[type=number]:hover{border-color:var(--zui-gray-400)}:host .thumb-input input[type=number]:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled][type=number]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled][type=number]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly][type=number]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block}:host .single-wrapper,:host .range-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:var(--zui-slider-thumb-size);margin:0;background:rgba(0,0,0,0);outline:none;cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-moz-range-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-webkit-slider-thumb{transform:translateY(calc(-50% + 0.125rem));-webkit-appearance:none;appearance:none}:host input[type=range]::-moz-range-thumb{border:0}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:all}:host .thumb-input input[type=number]{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input[type=number]::-webkit-inner-spin-button,:host .thumb-input input[type=number]::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child{width:.125rem;height:1rem;border-radius:.125rem}:host .range-wrapper{cursor:grab}:host .range-wrapper:active{cursor:grabbing}:host .range-wrapper input[type=range]{position:absolute;pointer-events:none}:host .range-wrapper input[type=range]::-webkit-slider-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .min-max-labels{display:flex;justify-content:space-between}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) input[type=range]:disabled{cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host([disabled]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host([disabled]) .step-dot{background-color:var(--zui-gray)}:host([disabled]) .range-wrapper{cursor:not-allowed}`;

package/src/zui-slider.scss

@@ -1,19 +1,45 @@
 @use '@zywave/zui-sass-scripts' as *;
 @use '@zywave/zui-input/src/input' as *;
 
+@mixin on-thumb {
+  &::-webkit-slider-thumb {
+    @content;
+  }
+
+  &::-moz-range-thumb {
+    @content;
+  }
+}
+
+@mixin on-track {
+  &::-webkit-slider-runnable-track {
+    @content;
+  }
+
+  &::-moz-range-track {
+    @content;
+  }
+}
+
+@mixin thumb-bg($color) {
+  background: radial-gradient(circle, $color calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
+}
+
 :host {
   --zui-slider-thumb-size: #{rem(14)};
   --zui-slider-input-width: 8ch;
 
   $thumb-ring-color: rgba(120, 120, 140, 0.16);
+  $thumb-ring-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
+  $track-height: rem(4);
 
   position: relative;
   display: block;
-  padding: calc(var(--zui-slider-thumb-size) / 2) 0;
 
   // Single mode
 
-  .single-wrapper {
+  .single-wrapper,
+  .range-wrapper {
     position: relative;
     display: flex;
     height: var(--zui-slider-thumb-size);
@@ -25,98 +51,63 @@
 
   input[type='range'] {
     width: 100%;
-    height: rem(4);
+    height: var(--zui-slider-thumb-size);
     margin: 0;
-    background: var(--zui-gray-200);
-    border-radius: rem(3);
+    background: transparent;
     outline: none;
     cursor: grab;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
 
-    &::-webkit-slider-thumb {
+    @include on-track {
+      height: $track-height;
+      background: var(--zui-slider-track-bg);
+    }
+
+    @include on-thumb {
       width: calc(var(--zui-slider-thumb-size) * 3);
       height: calc(var(--zui-slider-thumb-size) * 3);
-      background: radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
+      @include thumb-bg(var(--zui-blue));
       border-radius: 50%;
       box-shadow: none;
+      cursor: grab;
       transition: background 100ms ease-out, box-shadow 100ms ease-out;
-      -webkit-appearance: none;
-      appearance: none;
 
       &:hover {
-        box-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
+        box-shadow: $thumb-ring-shadow;
       }
     }
 
+    &::-webkit-slider-thumb {
+      transform: translateY(calc(-50% + #{rem(2)}));
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
     &::-moz-range-thumb {
-      width: calc(var(--zui-slider-thumb-size) * 3);
-      height: calc(var(--zui-slider-thumb-size) * 3);
-      background: radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
       border: 0;
-      border-radius: 50%;
-      box-shadow: none;
-      transition: background 100ms ease-out, box-shadow 100ms ease-out;
-
-      &:hover {
-        box-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
-      }
     }
 
     &:hover {
-      &::-webkit-slider-thumb {
-        background: radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
-      }
-
-      &::-moz-range-thumb {
-        background: radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
+      @include on-thumb {
+        @include thumb-bg(var(--zui-blue-400));
       }
     }
 
     &:focus {
-      &::-webkit-slider-thumb {
-        box-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
-      }
-
-      &::-moz-range-thumb {
-        box-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
+      @include on-thumb {
+        box-shadow: $thumb-ring-shadow;
       }
     }
 
     &:active {
-      &::-webkit-slider-thumb {
-        background: radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
-        box-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
-        cursor: grabbing;
-      }
-
-      &::-moz-range-thumb {
-        background: radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
-        box-shadow: inset 0 0 0 var(--zui-slider-thumb-size) $thumb-ring-color;
+      @include on-thumb {
+        @include thumb-bg(var(--zui-blue-600));
+        box-shadow: $thumb-ring-shadow;
         cursor: grabbing;
       }
     }
-
-    &:disabled {
-      cursor: not-allowed;
-
-      &::-webkit-slider-thumb {
-        background: radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
-
-        &:hover {
-          box-shadow: none;
-        }
-      }
-
-      &::-moz-range-thumb {
-        background: radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
-
-        &:hover {
-          box-shadow: none;
-        }
-      }
-    }
   }
 
   // Shared: floating input above the thumb
@@ -178,76 +169,23 @@
   // Range mode
 
   .range-wrapper {
-    position: relative;
-    display: flex;
-    height: rem(4);
-    align-items: center;
-    overflow: visible;
-    margin: rem(5) calc(var(--zui-slider-thumb-size) * -1);
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
 
     input[type='range'] {
       position: absolute;
-      width: 100%;
-      height: var(--zui-slider-thumb-size);
-      background: transparent;
-      transform: translateY(-50%);
       pointer-events: none;
 
-      @supports (-moz-appearance: none) {
-        top: 50%;
-        left: 0;
-      }
-
-      &::-webkit-slider-runnable-track {
-        height: rem(4);
-        background: transparent;
-      }
-
-      &::-webkit-slider-thumb {
-        margin-top: rem(2);
-        cursor: grab;
+      @include on-thumb {
         pointer-events: all;
       }
 
-      &::-moz-range-track {
-        height: rem(4);
-        background: transparent;
-      }
-
       &::-moz-range-progress {
         background: transparent;
       }
-
-      &::-moz-range-thumb {
-        cursor: grab;
-        pointer-events: all;
-      }
-
-      &:active {
-        &::-webkit-slider-thumb {
-          cursor: grabbing;
-        }
-
-        &::-moz-range-thumb {
-          cursor: grabbing;
-        }
-      }
-
-      &:disabled {
-        &::-webkit-slider-thumb {
-          cursor: not-allowed;
-          pointer-events: all;
-        }
-
-        &::-moz-range-thumb {
-          cursor: not-allowed;
-          pointer-events: all;
-        }
-      }
-    }
-
-    .thumb-input {
-      bottom: calc(var(--zui-slider-thumb-size) * 2 - #{rem(1)});
     }
   }
 
@@ -276,13 +214,8 @@
   input[type='range']:disabled {
     cursor: default;
 
-    &::-webkit-slider-thumb {
-      background: radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
-      cursor: default;
-    }
-
-    &::-moz-range-thumb {
-      background: radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - #{rem(1)}), transparent calc(var(--zui-slider-thumb-size) / 2));
+    @include on-thumb {
+      @include thumb-bg(var(--zui-blue));
       cursor: default;
     }
   }
@@ -291,11 +224,24 @@
 :host([disabled]) {
   cursor: not-allowed;
 
-  .range-wrapper {
+  input[type='range']:disabled {
     cursor: not-allowed;
+
+    @include on-thumb {
+      @include thumb-bg(var(--zui-gray));
+      cursor: not-allowed;
+
+      &:hover {
+        box-shadow: none;
+      }
+    }
   }
 
   .step-dot {
     background-color: var(--zui-gray);
   }
+
+  .range-wrapper {
+    cursor: not-allowed;
+  }
 }

package/src/zui-slider.ts

@@ -42,8 +42,7 @@ type ThumbFlag = 'thumb' | 'startThumb' | 'endThumb';
  * @prop {number} [step=0] - Represents the stepping interval; 0 means any value is allowed
  * @prop {boolean} [showMinMax=false] - Shows the min and max values beneath the slider
  *
- * @cssprop [--zui-slider-thumb-size=0.875rem (14px)] - Controls the visual dot size and thumb hit-area (hit area is 3× this value)
- * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each thumb
+ * @cssprop [--zui-slider-input-width=7ch] - Width of the floating value input above each slider thumb
  *
  * @event {CustomEvent} change - Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }
  */
@@ -358,7 +357,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
       <div class="single-wrapper">
         <input
           aria-label="Slider value"
-          style=${styleMap({ background: this.#singleTrackBackground(progress) })}
+          style=${styleMap({ '--zui-slider-track-bg': this.#singleTrackBackground(progress) })}
           type="range"
           .min="${String(this.min)}"
           .max="${String(this.max)}"
@@ -372,7 +371,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           @focus="${this.#h.thumb.show}"
           @blur="${this.#h.thumb.hide}"
         />
-        ${this.#renderStepDots()}
         ${this.#renderFloatingInput(
           this.#value,
           this.#onThumbFloatingInput,
@@ -381,6 +379,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           this.#isVisible('thumb'),
           progress
         )}
+        ${this.#renderStepDots()}
       </div>
     `;
   }
@@ -389,11 +388,8 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     const progressStart = this.progressStart;
     const progressEnd = this.progressEnd;
     return html`
-      <div
-        class="range-wrapper"
-        style=${styleMap({ background: this.#rangeTrackBackground(progressStart, progressEnd) })}
-      >
-        ${this.#renderStepDots()}${this.#renderRangeInput('start')}
+      <div class="range-wrapper" @click="${this.#onTrackClick}">
+        ${this.#renderRangeInput('start', this.#rangeTrackBackground(progressStart, progressEnd))}
         ${this.#renderFloatingInput(
           this.#valueStart,
           this.#onStartThumbFloatingInput,
@@ -411,11 +407,12 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           this.#isVisible('endThumb'),
           progressEnd
         )}
+        ${this.#renderStepDots()}
       </div>
     `;
   }
 
-  #renderRangeInput(which: 'start' | 'end') {
+  #renderRangeInput(which: 'start' | 'end', trackBg?: string) {
     const flag: ThumbFlag = which === 'start' ? 'startThumb' : 'endThumb';
     const val = which === 'start' ? this.#valueStart : this.#valueEnd;
     const onInput = which === 'start' ? this.#onRangeStartInput : this.#onRangeEndInput;
@@ -428,6 +425,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         aria-label="${which === 'start' ? 'Range start' : 'Range end'}"
         class="range-${which}"
         type="range"
+        style=${trackBg ? styleMap({ '--zui-slider-track-bg': trackBg }) : nothing}
         .min="${String(this.min)}"
         .max="${String(this.max)}"
         .step="${this.step > 0 ? String(this.step) : '1'}"
@@ -602,6 +600,47 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     );
   }
 
+  #onTrackClick(e: MouseEvent) {
+    if (this.disabled || this.readOnly) {
+      return;
+    }
+
+    const wrapper = e.currentTarget as HTMLElement;
+    const rect = wrapper.getBoundingClientRect();
+    // Thumb diameter is 3× the custom property; radius is 1.5×. Track is inset by one radius each side.
+    const thumbRadius = 1.5 * parseFloat(getComputedStyle(this).getPropertyValue('--zui-slider-thumb-size'));
+    const trackLeft = rect.left + thumbRadius;
+    const effectiveWidth = rect.width - 2 * thumbRadius;
+    const fraction = Math.max(0, Math.min(1, (e.clientX - trackLeft) / effectiveWidth));
+    const rawValue = this.min + fraction * (this.max - this.min);
+
+    // Ignore clicks that land within a thumb's hit area — those bubble up from native input
+    // interactions and should not be treated as track clicks.
+    const startX = trackLeft + (this.progressStart / 100) * effectiveWidth;
+    const endX = trackLeft + (this.progressEnd / 100) * effectiveWidth;
+    if (Math.abs(e.clientX - startX) <= thumbRadius || Math.abs(e.clientX - endX) <= thumbRadius) {
+      return;
+    }
+
+    const snappedStr = this.#processFloatingValue(rawValue);
+    const snapped = parseFloat(snappedStr);
+    const startNum = parseFloat(this.#valueStart);
+    const endNum = parseFloat(this.#valueEnd);
+
+    // Move whichever thumb is closer to the click; prefer start on a tie
+    if (Math.abs(rawValue - startNum) <= Math.abs(rawValue - endNum)) {
+      if (snapped < endNum) {
+        this.valueStart = snappedStr;
+        this.#onRangeChange();
+      }
+    } else {
+      if (snapped > startNum) {
+        this.valueEnd = snappedStr;
+        this.#onRangeChange();
+      }
+    }
+  }
+
   #showThumbInput(flag: ThumbFlag) {
     if (this.disabled) {
       return;

package/test/zui-slider.test.ts

@@ -102,13 +102,13 @@ suite('zui-slider', () => {
     await element.updateComplete;
     const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
     const thumbDiv = element.shadowRoot!.querySelector<HTMLElement>('.thumb-input')!;
-    const bgBefore = input.style.background;
+    const bgBefore = input.style.getPropertyValue('--zui-slider-track-bg');
     input.value = '75';
     input.dispatchEvent(new Event('input'));
     await element.updateComplete;
     assert.include(thumbDiv.style.left, '75%');
-    assert.notEqual(input.style.background, bgBefore);
-    assert.include(input.style.background, '75%');
+    assert.notEqual(input.style.getPropertyValue('--zui-slider-track-bg'), bgBefore);
+    assert.include(input.style.getPropertyValue('--zui-slider-track-bg'), '75%');
   });
 
   test('floating input change fires component change event', async () => {
@@ -232,7 +232,7 @@ suite('zui-slider', () => {
   test('single mode input has inline linear-gradient background with transparent insets', async () => {
     await element.updateComplete;
     const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
-    const bg = input.style.background;
+    const bg = input.style.getPropertyValue('--zui-slider-track-bg');
     assert.include(bg, 'linear-gradient');
     assert.include(bg, 'transparent var(--zui-slider-thumb-size)');
     assert.include(bg, 'transparent calc(100% - var(--zui-slider-thumb-size))');
@@ -242,13 +242,13 @@ suite('zui-slider', () => {
     element.disabled = true;
     await element.updateComplete;
     const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
-    assert.include(input.style.background, 'var(--zui-gray)');
-    assert.notInclude(input.style.background, 'var(--zui-blue)');
+    assert.include(input.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-gray)');
+    assert.notInclude(input.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-blue)');
 
     element.disabled = false;
     await element.updateComplete;
-    assert.include(input.style.background, 'var(--zui-blue)');
-    assert.notInclude(input.style.background, 'var(--zui-gray)');
+    assert.include(input.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-blue)');
+    assert.notInclude(input.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-gray)');
   });
 
   test('single mode gradient progress stop shifts when value changes', async () => {
@@ -256,13 +256,22 @@ suite('zui-slider', () => {
     element.value = '50';
     await element.updateComplete;
     const input = element.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]')!;
-    assert.include(input.style.background, 'calc(50% + var(--zui-slider-thumb-size) * 0)');
+    assert.include(
+      input.style.getPropertyValue('--zui-slider-track-bg'),
+      'calc(50% + var(--zui-slider-thumb-size) * 0)'
+    );
 
     // At value=75 (progress=75): offset = 1.5 - (3*75)/100 = -0.75
     element.value = '75';
     await element.updateComplete;
-    assert.include(input.style.background, 'calc(75% + var(--zui-slider-thumb-size) * -0.75)');
-    assert.notInclude(input.style.background, 'calc(50% + var(--zui-slider-thumb-size) * 0)');
+    assert.include(
+      input.style.getPropertyValue('--zui-slider-track-bg'),
+      'calc(75% + var(--zui-slider-thumb-size) * -0.75)'
+    );
+    assert.notInclude(
+      input.style.getPropertyValue('--zui-slider-track-bg'),
+      'calc(50% + var(--zui-slider-thumb-size) * 0)'
+    );
   });
 
   test('form reset hides visible floating input', async () => {
@@ -912,14 +921,13 @@ suite('zui-slider range', () => {
     await element.updateComplete;
     const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
     const thumbInputDivs = element.shadowRoot!.querySelectorAll<HTMLElement>('.thumb-input');
-    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
-    const bgBefore = wrapper.style.background;
+    const bgBefore = startInput.style.getPropertyValue('--zui-slider-track-bg');
     startInput.value = '30';
     startInput.dispatchEvent(new Event('input'));
     await element.updateComplete;
     assert.include(thumbInputDivs[0].style.left, '30%');
-    assert.notEqual(wrapper.style.background, bgBefore);
-    assert.include(wrapper.style.background, '30%');
+    assert.notEqual(startInput.style.getPropertyValue('--zui-slider-track-bg'), bgBefore);
+    assert.include(startInput.style.getPropertyValue('--zui-slider-track-bg'), '30%');
   });
 
   test('change event fires with valueStart and valueEnd detail on range-start change', async () => {
@@ -1021,14 +1029,14 @@ suite('zui-slider range', () => {
   test('range-wrapper gradient uses gray when disabled and reverts to blue when re-enabled', async () => {
     element.disabled = true;
     await element.updateComplete;
-    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
-    assert.include(wrapper.style.background, 'var(--zui-gray)');
-    assert.notInclude(wrapper.style.background, 'var(--zui-blue)');
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    assert.include(startInput.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-gray)');
+    assert.notInclude(startInput.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-blue)');
 
     element.disabled = false;
     await element.updateComplete;
-    assert.include(wrapper.style.background, 'var(--zui-blue)');
-    assert.notInclude(wrapper.style.background, 'var(--zui-gray)');
+    assert.include(startInput.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-blue)');
+    assert.notInclude(startInput.style.getPropertyValue('--zui-slider-track-bg'), 'var(--zui-gray)');
   });
 
   test('form reset hides visible floating inputs in range mode', async () => {
@@ -1072,8 +1080,8 @@ suite('zui-slider range', () => {
 
   test('range-wrapper gradient insets are transparent outside thumb-size bounds', async () => {
     await element.updateComplete;
-    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
-    const bg = wrapper.style.background;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    const bg = startInput.style.getPropertyValue('--zui-slider-track-bg');
     assert.include(bg, 'transparent var(--zui-slider-thumb-size)');
     assert.include(bg, 'transparent calc(100% - var(--zui-slider-thumb-size))');
   });
@@ -1098,13 +1106,13 @@ suite('zui-slider range', () => {
     element.valueStart = '25';
     element.valueEnd = '75';
     await element.updateComplete;
-    const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
-    const bg25 = wrapper.style.background;
+    const startInput = element.shadowRoot!.querySelector<HTMLInputElement>('input.range-start')!;
+    const bg25 = startInput.style.getPropertyValue('--zui-slider-track-bg');
 
     element.valueStart = '10';
     element.valueEnd = '90';
     await element.updateComplete;
-    const bg10 = wrapper.style.background;
+    const bg10 = startInput.style.getPropertyValue('--zui-slider-track-bg');
 
     assert.notEqual(bg25, bg10);
   });
@@ -1195,6 +1203,116 @@ suite('zui-slider range', () => {
   });
 });
 
+// Dispatches a click at a given 0–1 fraction of the effective track, matching the
+// coordinate math in #onTrackClick so the component computes the same fraction back.
+function clickAtFraction(element: ZuiSlider, fraction: number): void {
+  const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
+  const rect = wrapper.getBoundingClientRect();
+  const thumbRadius = 1.5 * parseFloat(getComputedStyle(element).getPropertyValue('--zui-slider-thumb-size'));
+  const effectiveWidth = rect.width - 2 * thumbRadius;
+  const clientX = rect.left + thumbRadius + fraction * effectiveWidth;
+  wrapper.dispatchEvent(new MouseEvent('click', { bubbles: true, clientX }));
+}
+
+suite('zui-slider range track click', () => {
+  let element: ZuiSlider;
+  let form: HTMLFormElement;
+
+  setup(() => {
+    element = document.createElement('zui-slider') as ZuiSlider;
+    element.setAttribute('range', '');
+    form = buildForm({ enableSubmit: false, appendChildren: [element] });
+  });
+
+  teardown(() => {
+    document.body.removeChild(form);
+  });
+
+  test('moves start thumb when clicking left of both thumbs', async () => {
+    await element.updateComplete;
+    clickAtFraction(element, 0.25);
+    assert.equal(element.valueStart, '25');
+    assert.equal(element.valueEnd, '100');
+  });
+
+  test('moves end thumb when clicking right of both thumbs', async () => {
+    await element.updateComplete;
+    clickAtFraction(element, 0.75);
+    assert.equal(element.valueStart, '0');
+    assert.equal(element.valueEnd, '75');
+  });
+
+  test('moves start thumb when closer to start than end', async () => {
+    element.valueStart = '20';
+    element.valueEnd = '60';
+    await element.updateComplete;
+    clickAtFraction(element, 0.3);
+    assert.equal(element.valueStart, '30');
+    assert.equal(element.valueEnd, '60');
+  });
+
+  test('moves end thumb when closer to end than start', async () => {
+    element.valueStart = '20';
+    element.valueEnd = '60';
+    await element.updateComplete;
+    clickAtFraction(element, 0.5);
+    assert.equal(element.valueStart, '20');
+    assert.equal(element.valueEnd, '50');
+  });
+
+  test('prefers start thumb when equidistant from both', async () => {
+    await element.updateComplete;
+    clickAtFraction(element, 0.5);
+    assert.equal(element.valueStart, '50');
+    assert.equal(element.valueEnd, '100');
+  });
+
+  test('does nothing when disabled', async () => {
+    element.disabled = true;
+    await element.updateComplete;
+    clickAtFraction(element, 0.25);
+    assert.equal(element.valueStart, '0');
+    assert.equal(element.valueEnd, '100');
+  });
+
+  test('does nothing when readonly', async () => {
+    element.setAttribute('readonly', '');
+    await element.updateComplete;
+    clickAtFraction(element, 0.25);
+    assert.equal(element.valueStart, '0');
+    assert.equal(element.valueEnd, '100');
+  });
+
+  test('fires change event with valueStart and valueEnd detail', async () => {
+    await element.updateComplete;
+    let detail: { valueStart: string; valueEnd: string } | undefined;
+    element.addEventListener('change', (e: Event) => {
+      detail = (e as CustomEvent).detail;
+    });
+    clickAtFraction(element, 0.25);
+    assert.deepEqual(detail, { valueStart: '25', valueEnd: '100' });
+  });
+
+  test('snaps clicked value to nearest step', async () => {
+    element.step = 10;
+    await element.updateComplete;
+    clickAtFraction(element, 0.23);
+    assert.equal(element.valueStart, '20');
+    assert.equal(element.valueEnd, '100');
+  });
+
+  test('does not move start thumb when snapped value would equal end', async () => {
+    element.valueStart = '40';
+    element.valueEnd = '50';
+    element.step = 10;
+    await element.updateComplete;
+    // 45% is equidistant (tie → start preferred), but snaps to 50 which is not < endNum=50 → no move
+    clickAtFraction(element, 0.45);
+    assert.equal(element.valueStart, '40');
+    assert.equal(element.valueEnd, '50');
+  });
+});
+
 suite('zui-slider step dots', () => {
   let element: ZuiSlider;