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._renderStepCircles(stepPositions)} ${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; }