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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -579,6 +579,19 @@
579
579
  "name": "#onRangeChange",
580
580
  "privacy": "private"
581
581
  },
582
+ {
583
+ "kind": "method",
584
+ "name": "#onTrackClick",
585
+ "privacy": "private",
586
+ "parameters": [
587
+ {
588
+ "name": "e",
589
+ "type": {
590
+ "text": "MouseEvent"
591
+ }
592
+ }
593
+ ]
594
+ },
582
595
  {
583
596
  "kind": "method",
584
597
  "name": "#showThumbInput",
@@ -1,3 +1,3 @@
1
1
  import { css } from 'lit';
2
- 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 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}`;
2
+ 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}`;
3
3
  //# sourceMappingURL=zui-slider-css.js.map
@@ -1 +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,klOAAklO,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 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"]}
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,+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"]}
@@ -347,7 +347,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
347
347
  const progressStart = this.progressStart;
348
348
  const progressEnd = this.progressEnd;
349
349
  return html `
350
- <div class="range-wrapper">
350
+ <div class="range-wrapper" @click="${this.#onTrackClick}">
351
351
  ${this.#renderRangeInput('start', this.#rangeTrackBackground(progressStart, progressEnd))}
352
352
  ${this.#renderFloatingInput(this.#valueStart, this.#onStartThumbFloatingInput, this.#onStartThumbFloatingChange, 'startThumb', this.#isVisible('startThumb'), progressStart)}
353
353
  ${this.#renderRangeInput('end')}
@@ -527,6 +527,43 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
527
527
  bubbles: true,
528
528
  }));
529
529
  }
530
+ #onTrackClick(e) {
531
+ if (this.disabled || this.readOnly) {
532
+ return;
533
+ }
534
+ const wrapper = e.currentTarget;
535
+ const rect = wrapper.getBoundingClientRect();
536
+ // Thumb diameter is 3× the custom property; radius is 1.5×. Track is inset by one radius each side.
537
+ const thumbRadius = 1.5 * parseFloat(getComputedStyle(this).getPropertyValue('--zui-slider-thumb-size'));
538
+ const trackLeft = rect.left + thumbRadius;
539
+ const effectiveWidth = rect.width - 2 * thumbRadius;
540
+ const fraction = Math.max(0, Math.min(1, (e.clientX - trackLeft) / effectiveWidth));
541
+ const rawValue = this.min + fraction * (this.max - this.min);
542
+ // Ignore clicks that land within a thumb's hit area — those bubble up from native input
543
+ // interactions and should not be treated as track clicks.
544
+ const startX = trackLeft + (this.progressStart / 100) * effectiveWidth;
545
+ const endX = trackLeft + (this.progressEnd / 100) * effectiveWidth;
546
+ if (Math.abs(e.clientX - startX) <= thumbRadius || Math.abs(e.clientX - endX) <= thumbRadius) {
547
+ return;
548
+ }
549
+ const snappedStr = this.#processFloatingValue(rawValue);
550
+ const snapped = parseFloat(snappedStr);
551
+ const startNum = parseFloat(this.#valueStart);
552
+ const endNum = parseFloat(this.#valueEnd);
553
+ // Move whichever thumb is closer to the click; prefer start on a tie
554
+ if (Math.abs(rawValue - startNum) <= Math.abs(rawValue - endNum)) {
555
+ if (snapped < endNum) {
556
+ this.valueStart = snappedStr;
557
+ this.#onRangeChange();
558
+ }
559
+ }
560
+ else {
561
+ if (snapped > startNum) {
562
+ this.valueEnd = snappedStr;
563
+ this.#onRangeChange();
564
+ }
565
+ }
566
+ }
530
567
  #showThumbInput(flag) {
531
568
  if (this.disabled) {
532
569
  return;
@@ -1 +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-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\">\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 #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"]}
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-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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zywave/zui-slider",
3
- "version": "4.4.0-pre.2",
3
+ "version": "4.4.0-pre.3",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "license": "UNLICENSED",
@@ -27,5 +27,5 @@
27
27
  "devDependencies": {
28
28
  "@zywave/zui-input": "^4.2.3"
29
29
  },
30
- "gitHead": "b282c7bb47d522516c83a59aba2d9b24800c5d88"
30
+ "gitHead": "a50a61d9903db3e0a032d894708c2f3a9c5ffb39"
31
31
  }
@@ -1,3 +1,3 @@
1
1
  import { css } from 'lit';
2
2
 
3
- 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 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}`;
3
+ 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}`;
@@ -169,6 +169,12 @@
169
169
  // Range mode
170
170
 
171
171
  .range-wrapper {
172
+ cursor: grab;
173
+
174
+ &:active {
175
+ cursor: grabbing;
176
+ }
177
+
172
178
  input[type='range'] {
173
179
  position: absolute;
174
180
  pointer-events: none;
package/src/zui-slider.ts CHANGED
@@ -388,7 +388,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
388
388
  const progressStart = this.progressStart;
389
389
  const progressEnd = this.progressEnd;
390
390
  return html`
391
- <div class="range-wrapper">
391
+ <div class="range-wrapper" @click="${this.#onTrackClick}">
392
392
  ${this.#renderRangeInput('start', this.#rangeTrackBackground(progressStart, progressEnd))}
393
393
  ${this.#renderFloatingInput(
394
394
  this.#valueStart,
@@ -600,6 +600,47 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
600
600
  );
601
601
  }
602
602
 
603
+ #onTrackClick(e: MouseEvent) {
604
+ if (this.disabled || this.readOnly) {
605
+ return;
606
+ }
607
+
608
+ const wrapper = e.currentTarget as HTMLElement;
609
+ const rect = wrapper.getBoundingClientRect();
610
+ // Thumb diameter is 3× the custom property; radius is 1.5×. Track is inset by one radius each side.
611
+ const thumbRadius = 1.5 * parseFloat(getComputedStyle(this).getPropertyValue('--zui-slider-thumb-size'));
612
+ const trackLeft = rect.left + thumbRadius;
613
+ const effectiveWidth = rect.width - 2 * thumbRadius;
614
+ const fraction = Math.max(0, Math.min(1, (e.clientX - trackLeft) / effectiveWidth));
615
+ const rawValue = this.min + fraction * (this.max - this.min);
616
+
617
+ // Ignore clicks that land within a thumb's hit area — those bubble up from native input
618
+ // interactions and should not be treated as track clicks.
619
+ const startX = trackLeft + (this.progressStart / 100) * effectiveWidth;
620
+ const endX = trackLeft + (this.progressEnd / 100) * effectiveWidth;
621
+ if (Math.abs(e.clientX - startX) <= thumbRadius || Math.abs(e.clientX - endX) <= thumbRadius) {
622
+ return;
623
+ }
624
+
625
+ const snappedStr = this.#processFloatingValue(rawValue);
626
+ const snapped = parseFloat(snappedStr);
627
+ const startNum = parseFloat(this.#valueStart);
628
+ const endNum = parseFloat(this.#valueEnd);
629
+
630
+ // Move whichever thumb is closer to the click; prefer start on a tie
631
+ if (Math.abs(rawValue - startNum) <= Math.abs(rawValue - endNum)) {
632
+ if (snapped < endNum) {
633
+ this.valueStart = snappedStr;
634
+ this.#onRangeChange();
635
+ }
636
+ } else {
637
+ if (snapped > startNum) {
638
+ this.valueEnd = snappedStr;
639
+ this.#onRangeChange();
640
+ }
641
+ }
642
+ }
643
+
603
644
  #showThumbInput(flag: ThumbFlag) {
604
645
  if (this.disabled) {
605
646
  return;
@@ -1203,6 +1203,116 @@ suite('zui-slider range', () => {
1203
1203
  });
1204
1204
  });
1205
1205
 
1206
+ // Dispatches a click at a given 0–1 fraction of the effective track, matching the
1207
+ // coordinate math in #onTrackClick so the component computes the same fraction back.
1208
+ function clickAtFraction(element: ZuiSlider, fraction: number): void {
1209
+ const wrapper = element.shadowRoot!.querySelector<HTMLElement>('.range-wrapper')!;
1210
+ const rect = wrapper.getBoundingClientRect();
1211
+ const thumbRadius = 1.5 * parseFloat(getComputedStyle(element).getPropertyValue('--zui-slider-thumb-size'));
1212
+ const effectiveWidth = rect.width - 2 * thumbRadius;
1213
+ const clientX = rect.left + thumbRadius + fraction * effectiveWidth;
1214
+ wrapper.dispatchEvent(new MouseEvent('click', { bubbles: true, clientX }));
1215
+ }
1216
+
1217
+ suite('zui-slider range track click', () => {
1218
+ let element: ZuiSlider;
1219
+ let form: HTMLFormElement;
1220
+
1221
+ setup(() => {
1222
+ element = document.createElement('zui-slider') as ZuiSlider;
1223
+ element.setAttribute('range', '');
1224
+ form = buildForm({ enableSubmit: false, appendChildren: [element] });
1225
+ });
1226
+
1227
+ teardown(() => {
1228
+ document.body.removeChild(form);
1229
+ });
1230
+
1231
+ test('moves start thumb when clicking left of both thumbs', async () => {
1232
+ await element.updateComplete;
1233
+ clickAtFraction(element, 0.25);
1234
+ assert.equal(element.valueStart, '25');
1235
+ assert.equal(element.valueEnd, '100');
1236
+ });
1237
+
1238
+ test('moves end thumb when clicking right of both thumbs', async () => {
1239
+ await element.updateComplete;
1240
+ clickAtFraction(element, 0.75);
1241
+ assert.equal(element.valueStart, '0');
1242
+ assert.equal(element.valueEnd, '75');
1243
+ });
1244
+
1245
+ test('moves start thumb when closer to start than end', async () => {
1246
+ element.valueStart = '20';
1247
+ element.valueEnd = '60';
1248
+ await element.updateComplete;
1249
+ clickAtFraction(element, 0.3);
1250
+ assert.equal(element.valueStart, '30');
1251
+ assert.equal(element.valueEnd, '60');
1252
+ });
1253
+
1254
+ test('moves end thumb when closer to end than start', async () => {
1255
+ element.valueStart = '20';
1256
+ element.valueEnd = '60';
1257
+ await element.updateComplete;
1258
+ clickAtFraction(element, 0.5);
1259
+ assert.equal(element.valueStart, '20');
1260
+ assert.equal(element.valueEnd, '50');
1261
+ });
1262
+
1263
+ test('prefers start thumb when equidistant from both', async () => {
1264
+ await element.updateComplete;
1265
+ clickAtFraction(element, 0.5);
1266
+ assert.equal(element.valueStart, '50');
1267
+ assert.equal(element.valueEnd, '100');
1268
+ });
1269
+
1270
+ test('does nothing when disabled', async () => {
1271
+ element.disabled = true;
1272
+ await element.updateComplete;
1273
+ clickAtFraction(element, 0.25);
1274
+ assert.equal(element.valueStart, '0');
1275
+ assert.equal(element.valueEnd, '100');
1276
+ });
1277
+
1278
+ test('does nothing when readonly', async () => {
1279
+ element.setAttribute('readonly', '');
1280
+ await element.updateComplete;
1281
+ clickAtFraction(element, 0.25);
1282
+ assert.equal(element.valueStart, '0');
1283
+ assert.equal(element.valueEnd, '100');
1284
+ });
1285
+
1286
+ test('fires change event with valueStart and valueEnd detail', async () => {
1287
+ await element.updateComplete;
1288
+ let detail: { valueStart: string; valueEnd: string } | undefined;
1289
+ element.addEventListener('change', (e: Event) => {
1290
+ detail = (e as CustomEvent).detail;
1291
+ });
1292
+ clickAtFraction(element, 0.25);
1293
+ assert.deepEqual(detail, { valueStart: '25', valueEnd: '100' });
1294
+ });
1295
+
1296
+ test('snaps clicked value to nearest step', async () => {
1297
+ element.step = 10;
1298
+ await element.updateComplete;
1299
+ clickAtFraction(element, 0.23);
1300
+ assert.equal(element.valueStart, '20');
1301
+ assert.equal(element.valueEnd, '100');
1302
+ });
1303
+
1304
+ test('does not move start thumb when snapped value would equal end', async () => {
1305
+ element.valueStart = '40';
1306
+ element.valueEnd = '50';
1307
+ element.step = 10;
1308
+ await element.updateComplete;
1309
+ // 45% is equidistant (tie → start preferred), but snaps to 50 which is not < endNum=50 → no move
1310
+ clickAtFraction(element, 0.45);
1311
+ assert.equal(element.valueStart, '40');
1312
+ assert.equal(element.valueEnd, '50');
1313
+ });
1314
+ });
1315
+
1206
1316
  suite('zui-slider step dots', () => {
1207
1317
  let element: ZuiSlider;
1208
1318