fix(uui-slider): Ensure track step dots are in center on track (#919)

* Ensure track step dots are in center on track * Calculate track height and hover style
umbraco · Oct 14, 2024 · 9cd02f6 · 9cd02f6
1 parent 8454ae9
commit 9cd02f6
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/packages/uui-range-slider/lib/uui-range-slider.element.ts b/packages/uui-range-slider/lib/uui-range-slider.element.ts
@@ -12,6 +12,7 @@ const Z_INDEX = {
 };
 
 const THUMB_SIZE = 18;
+const TRACK_HEIGHT = 3;
 const TRACK_PADDING = 12;
 const STEP_MIN_WIDTH = 24;
 
@@ -642,7 +643,7 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
 
     return html`<div class="step-wrapper">
       <svg height="100%" width="100%">
-        <rect x="9" y="9" height="3" rx="2" />
+        <rect x="9" y="9" height="${TRACK_HEIGHT}" rx="2" />
         ${this._renderStepCircles(stepPositions)}
       </svg>
       ${this._renderStepValues(stepAmount)}
@@ -671,9 +672,9 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
       const colorEnd = this._highInputValue - this._min;
 
       if (cx / trackValue >= colorStart && cx / trackValue <= colorEnd) {
-        return svg`<circle class="track-step filled" cx="${cx}" cy="5" r="4.5" />`;
+        return svg`<circle class="track-step filled" cx="${cx}" cy="${TRACK_HEIGHT * 2}" r="4.5" />`;
       } else {
-        return svg`<circle class="track-step regular" cx="${cx}" cy="5" r="4.5" />`;
+        return svg`<circle class="track-step regular" cx="${cx}" cy="${TRACK_HEIGHT * 2}" r="4.5" />`;
       }
     })}`;
   }
@@ -779,16 +780,18 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
       }
 
       :host(:not([readonly])) #inner-color-thumb:hover .color {
-        height: 5px;
+        height: ${TRACK_HEIGHT * 2}px;
         background-color: var(--color-hover);
+        transform: translateY(-${TRACK_HEIGHT / 2}px);
       }
 
       .color {
         user-select: none;
         position: absolute;
         inset-inline: 0;
-        height: 3px;
-        transform: translateY(2px);
+        height: ${TRACK_HEIGHT}px;
+        top: 50%;
+        transform: translateY(0);
         background-color: var(--color-interactive);
         transition: height 60ms;
       }