Repository: equinor/design-system (ts)

Issue:
Slider Active line disappears when user hovers
**Describe the bug**

Slider Active area disappears on hover.

**Steps to reproduce the bug**

1. Open https://storybook.eds.equinor.com/?path=/docs/inputs-slider--docs
2. Hover the primary color are of the slider 
3. See the primary color disappearing

**Expected behavior**

The primary color should not disappear. Reported by user.

**Specifications**

- Version: N/A
- Browser: Chrome
- OS: MacOS

**Additional context**

https://storybook.eds.equinor.com/?path=/docs/inputs-slider--docs

Pull request:
fix(eds-core-react): 🐛 Fix slider track disappearing on hover
Resolves #3786 

Patch:
diff --git a/package.json b/package.json
index 682e215d..2b417b18 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "test:watch:data-grid-react": "pnpm --filter @equinor/eds-data-grid-react run test:watch",
     "test:update-snapshots:core-react": "pnpm --filter @equinor/eds-core-react run test:update-snapshots",
     "test:update-snapshots:lab": "pnpm --filter @equinor/eds-lab-react run test:update-snapshots",
+    "test:storybook-build": "pnpm run build && pnpm run build:storybook && npx serve packages/eds-core-react/storybook-build",
     "storybook:core-react": "pnpm --filter @equinor/eds-core-react run storybook",
     "storybook": "pnpm storybook:core-react",
     "storybook:lab": "pnpm --filter @equinor/eds-lab-react run storybook",
diff --git a/packages/eds-core-react/src/components/Slider/Slider.tsx b/packages/eds-core-react/src/components/Slider/Slider.tsx
index e85c9d3f..dc736a08 100644
--- a/packages/eds-core-react/src/components/Slider/Slider.tsx
+++ b/packages/eds-core-react/src/components/Slider/Slider.tsx
@@ -21,16 +21,15 @@ const {
   entities: { track, handle, dot, output },
 } = tokens
 
+const encodedTrackColor = encodeURIComponent(track.background)
+const encodedHoverColor = encodeURIComponent(track.states.hover.background)
+
 const fakeTrackBg = css`
-  background-image: url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${track.background}' width='100%' height='4' rx='2' /></svg>");
+  background-image: url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${encodedTrackColor}' width='100%' height='4' rx='2' /></svg>");
   background-size: cover;
   background-repeat: no-repeat;
 `
 
-const fakeTrackBgHover = css({
-  backgroundImage: `url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${track.states.hover.background}' width='100%' height='4' rx='2' /></svg>")`,
-})
-
 const trackFill = css`
   grid-column: 1 / span 2;
   grid-row: 2;
@@ -82,9 +81,6 @@ const RangeWrapper = styled.div.attrs<RangeWrapperProps>(
         : $hideActiveTrack
           ? 'transparent'
           : track.entities.indicator.background,
-      '--background-hover': $hideActiveTrack
-        ? 'transparent'
-        : track.entities.indicator.states.hover.background,
       ...style,
     },
   }),
@@ -125,10 +121,14 @@ const RangeWrapper = styled.div.attrs<RangeWrapperProps>(
 
   @media (hover: hover) and (pointer: fine) {
     &:hover:not([data-disabled]) {
-      ${fakeTrackBgHover}
+      background-image: url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${encodedHoverColor}' width='100%' height='4' rx='2' /></svg>");
+
       &::before,
       &::after {
-        background: var(--background-hover);
+        background: ${({ $hideActiveTrack }) =>
+          $hideActiveTrack
+            ? 'transparent'
+            : track.entities.indicator.states.hover.background};
       }
     }
   }
@@ -187,9 +187,6 @@ const Wrapper = styled.div.attrs<WrapperProps>(
         : $hideActiveTrack
           ? 'transparent'
           : track.entities.indicator.background,
-      '--background-hover': $hideActiveTrack
-        ? 'transparent'
-        : track.entities.indicator.states.hover.background,
       ...style,
     },
   }),
@@ -220,11 +217,16 @@ const Wrapper = styled.div.attrs<WrapperProps>(
 
   @media (hover: hover) and (pointer: fine) {
     &:hover:not([data-disabled]) {
-      ${fakeTrackBgHover}
+      background-image: url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${encodedHoverColor}' width='100%' height='4' rx='2' /></svg>");
+
       &::after {
-        background: var(--background-hover);
+        background: ${({ $hideActiveTrack }) =>
+          $hideActiveTrack
+            ? 'transparent'
+            : track.entities.indicator.states.hover.background};
       }
     }
+
     ${({ $labelBelow }) =>
       $labelBelow &&
       css`


Test patch:
diff --git a/packages/eds-core-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap b/packages/eds-core-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap
index 5743e1b7..45173430 100644
--- a/packages/eds-core-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap
+++ b/packages/eds-core-react/src/components/Slider/__snapshots__/Slider.test.tsx.snap
@@ -179,7 +179,7 @@ exports[`Simple slider Matches snapshot 1`] = `
   grid-template-columns: 1fr 1fr;
   width: 100%;
   position: relative;
-  background-image: url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='var(--eds_ui_background__light, rgba(247, 247, 247, 1))' width='100%' height='4' rx='2' /></svg>");
+  background-image: url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='var(--eds_ui_background__light%2C%20rgba(247%2C%20247%2C%20247%2C%201))' width='100%' height='4' rx='2' /></svg>");
   background-size: cover;
   background-repeat: no-repeat;
 }
@@ -263,18 +263,18 @@ exports[`Simple slider Matches snapshot 1`] = `
 
 @media (hover:hover) and (pointer:fine) {
   .c0:hover:not([data-disabled]) {
-    background-image: url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='var(--eds_ui_background__medium, rgba(220, 220, 220, 1))' width='100%' height='4' rx='2' /></svg>");
+    background-image: url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='var(--eds_ui_background__medium%2C%20rgba(220%2C%20220%2C%20220%2C%201))' width='100%' height='4' rx='2' /></svg>");
   }
 
   .c0:hover:not([data-disabled])::after {
-    background: var(--background-hover);
+    background: var(--eds_interactive_primary__hover, rgba(0, 79, 85, 1));
   }
 }
 
 <div
     class="c0"
     id="test"
-    style="--min: 0; --max: 100; --value: 0; --showTooltip: 0; --background: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1)); --background-hover: var(--eds_interactive_primary__hover, rgba(0, 79, 85, 1));"
+    style="--min: 0; --max: 100; --value: 0; --showTooltip: 0; --background: var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1));"
     value="0"
   >
     <input