Skip to content

Commit 54562e4

Browse files
committed
fix(slider): corrects contrast bug caused by template default arg
1 parent 8637d39 commit 54562e4

File tree

2 files changed

+12
-2
lines changed

2 files changed

+12
-2
lines changed

.changeset/few-glasses-bathe.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@spectrum-css/slider": minor
3+
---
4+
5+
# Slider contrast fix
6+
7+
Corrects the contrast issue observed between the fill element and slider track that caused the fill element to be difficult to see.
8+
9+
- Adjusts colors per design feedback.
10+
- Removes default control/template value that caused contrast issue in dark mode.

components/slider/stories/template.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const Template = ({
2121
values = [],
2222
variant,
2323
labelPosition,
24-
fillColor = "rgb(213, 213, 213)",
24+
fillColor,
2525
showTicks = false,
2626
showTickLabels = false,
2727
isDisabled = false,
@@ -127,8 +127,8 @@ export const Template = ({
127127
})}
128128
id=${ifDefined(id)}
129129
style=${styleMap({
130+
"--spectrum-slider-track-color": fillColor ? fillColor : undefined,
130131
"inline-size": "240px",
131-
["--spectrum-slider-track-color"]: fillColor,
132132
...customStyles,
133133
})}
134134
role=${ifDefined(values.length > 1 ? "group" : undefined)}

0 commit comments

Comments
 (0)