From 7d931a6f8f08922b7d50b00cc17ab2d73cabb45e Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 22 Sep 2024 15:21:48 +0200
Subject: [PATCH 1/2] Ensure track step dots are in center on track

---
 .../uui-range-slider/lib/uui-range-slider.element.ts     | 9 +++++----
 1 file changed, 5 insertions(+), 4 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
index 8511ff274..0ff5b9d12 100644
--- 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" />`;
       }
     })}`;
   }
@@ -788,7 +789,7 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
         position: absolute;
         inset-inline: 0;
         height: 3px;
-        transform: translateY(2px);
+        top: 50%;
         background-color: var(--color-interactive);
         transition: height 60ms;
       }

From 318c70d3c1a82dfaa4029eb669aae053eef5370f Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 22 Sep 2024 15:49:36 +0200
Subject: [PATCH 2/2] Calculate track height and hover style

---
 packages/uui-range-slider/lib/uui-range-slider.element.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 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
index 0ff5b9d12..19702e2d0 100644
--- a/packages/uui-range-slider/lib/uui-range-slider.element.ts
+++ b/packages/uui-range-slider/lib/uui-range-slider.element.ts
@@ -780,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;
+        height: ${TRACK_HEIGHT}px;
         top: 50%;
+        transform: translateY(0);
         background-color: var(--color-interactive);
         transition: height 60ms;
       }