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..19702e2d0 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`
${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``;
+ return svg``;
} else {
- return svg``;
+ return svg``;
}
})}`;
}
@@ -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;
}