Range input #6739

src/js/components/RangeInput/StyledRangeInput.js

@@ -64,7 +64,7 @@ const trackColorStyle = (props) => {
     else {
       defaultTrackColor = getRGBA(
         normalizeColor(props.theme.rangeInput.track.color, props.theme),
-        props.theme.rangeInput.track.opacity || 1,
+        props.theme.rangeInput.track.opacity,
       );
     }
 
@@ -105,14 +105,14 @@ const trackColorStyle = (props) => {
       const { value, color, opacity } = arrayOfTrackColors[index];
       result += `${getRGBA(
         normalizeColor(color, props.theme),
-        opacity || 1,
+        opacity,
       )} ${valuePercentage}%,`;
 
       if (props.value >= value) {
         valuePercentage = ((value - min) / (max - min)) * 100;
         result += `${getRGBA(
           normalizeColor(color, props.theme),
-          opacity || 1,
+          opacity,
         )} ${valuePercentage}%,`;
       } else {
         result += `${getRGBA(

src/js/components/RangeInput/__tests__/RangeInput-test.tsx

@@ -138,4 +138,24 @@ describe('RangeInput', () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  test('with 8-digit HEX color', () => {
+    const { container } = render(
+      <Grommet>
+        <RangeInput
+          color={[
+            { value: 3, color: '#FF0000', opacity: 0.5 },
+            { value: 4, color: '#FFFF00' },
+            { value: 6, color: '#00FF004A' },
+          ]}
+          min={1}
+          max={10}
+          step={1}
+          value={5}
+        />
+      </Grommet>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });

src/js/components/RangeInput/__tests__/__snapshots__/RangeInput-test.tsx.snap

@@ -1070,6 +1070,152 @@ exports[`RangeInput track themed with color and opacity 1`] = `
 </div>
 `;
 
+exports[`RangeInput with 8-digit HEX color 1`] = `
+.c0 {
+  font-size: 18px;
+  line-height: 24px;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.c1 {
+  box-sizing: border-box;
+  position: relative;
+  -webkit-appearance: none;
+  border-color: transparent;
+  height: 24px;
+  width: 100%;
+  padding: 0px;
+  cursor: pointer;
+  background: transparent;
+  margin: 0px;
+}
+
+.c1::-moz-focus-inner {
+  border: none;
+}
+
+.c1::-moz-focus-outer {
+  border: none;
+}
+
+.c1::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(to right,rgba(255,0,0,0.5) 0%,rgba(255,0,0,0.5) 22.22222222222222%,rgba(255,255,0,1) 22.22222222222222%,rgba(255,255,0,1) 33.33333333333333%,rgba(0,255,0,0.2901960784313726) 33.33333333333333%,rgba(0,255,0,1) 44.44444444444444%,rgba(0,0,0,0.2) 44.44444444444444%,rgba(0,0,0,0.2));
+}
+
+.c1::-webkit-slider-thumb {
+  margin-top: -10px;
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 24px;
+  height: 24px;
+  width: 24px;
+  overflow: visible;
+  background: #7D4CDB;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+
+.c1::-webkit-slider-thumb:hover {
+  box-shadow: 0px 0px 0px 2px #7D4CDB;
+}
+
+.c1::-moz-range-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(to right,rgba(255,0,0,0.5) 0%,rgba(255,0,0,0.5) 22.22222222222222%,rgba(255,255,0,1) 22.22222222222222%,rgba(255,255,0,1) 33.33333333333333%,rgba(0,255,0,0.2901960784313726) 33.33333333333333%,rgba(0,255,0,1) 44.44444444444444%,rgba(0,0,0,0.2) 44.44444444444444%,rgba(0,0,0,0.2));
+}
+
+.c1::-moz-range-thumb {
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 24px;
+  height: 24px;
+  width: 24px;
+  overflow: visible;
+  background: #7D4CDB;
+  -webkit-appearance: none;
+  cursor: pointer;
+  margin-top: 0px;
+  height: 24px;
+  width: 24px;
+}
+
+.c1::-ms-thumb {
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 24px;
+  height: 24px;
+  width: 24px;
+  overflow: visible;
+  background: #7D4CDB;
+  -webkit-appearance: none;
+  cursor: pointer;
+  margin-top: 0px;
+  height: 24px;
+  width: 24px;
+}
+
+.c1:hover::-moz-range-thumb {
+  box-shadow: 0px 0px 0px 2px #7D4CDB;
+}
+
+.c1:hover::-ms-thumb {
+  box-shadow: 0px 0px 0px 2px #7D4CDB;
+}
+
+.c1::-ms-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(to right,rgba(255,0,0,0.5) 0%,rgba(255,0,0,0.5) 22.22222222222222%,rgba(255,255,0,1) 22.22222222222222%,rgba(255,255,0,1) 33.33333333333333%,rgba(0,255,0,0.2901960784313726) 33.33333333333333%,rgba(0,255,0,1) 44.44444444444444%,rgba(0,0,0,0.2) 44.44444444444444%,rgba(0,0,0,0.2));
+  border-color: transparent;
+  color: transparent;
+}
+
+.c1::-ms-fill-lower {
+  background: linear-gradient(to right,rgba(255,0,0,0.5) 0%,rgba(255,0,0,0.5) 22.22222222222222%,rgba(255,255,0,1) 22.22222222222222%,rgba(255,255,0,1) 33.33333333333333%,rgba(0,255,0,0.2901960784313726) 33.33333333333333%,rgba(0,255,0,1) 44.44444444444444%,rgba(0,0,0,0.2) 44.44444444444444%,rgba(0,0,0,0.2));
+  border-color: transparent;
+}
+
+.c1::-ms-fill-upper {
+  background: linear-gradient(to right,rgba(255,0,0,0.5) 0%,rgba(255,0,0,0.5) 22.22222222222222%,rgba(255,255,0,1) 22.22222222222222%,rgba(255,255,0,1) 33.33333333333333%,rgba(0,255,0,0.2901960784313726) 33.33333333333333%,rgba(0,255,0,1) 44.44444444444444%,rgba(0,0,0,0.2) 44.44444444444444%,rgba(0,0,0,0.2));
+  border-color: transparent;
+}
+
+.c1:focus-visible {
+  outline: 0;
+}
+
+.c1:focus {
+  outline: none;
+}
+
+<div
+  class="c0"
+>
+  <input
+    aria-valuemax="10"
+    aria-valuemin="1"
+    aria-valuenow="5"
+    class="c1"
+    color="[object Object],[object Object],[object Object]"
+    max="10"
+    min="1"
+    step="1"
+    type="range"
+    value="5"
+  />
+</div>
+`;
+
 exports[`RangeInput with min and max offset 1`] = `
 .c0 {
   font-size: 18px;