[Color segmentation] Apply linear gradient to Hue slider background t…

…o see captured color range
ttoivone · Nov 8, 2019 · c72e66b · c72e66b
1 parent ec5ce3e
commit c72e66b
Showing 1 changed file with 30 additions and 3 deletions.
diff --git a/samples/css/settings.css b/samples/css/settings.css
@@ -100,20 +100,21 @@
 .pro-settings input[type=range] {
   width: 200px;
 }
+
 .settings-bar input[type=range]:focus,
 #jitterLimit:focus, #edgeError:focus, #downscaleLevel:focus,
 #thresholdBlockSize:focus, #thresholdOffset:focus,
 #lowerHue:focus, #upperHue:focus, #lowerSaturation:focus,
 #upperSaturation:focus, #lowerValue:focus, #upperValue:focus {
   outline: none;
 }
+
 .settings-bar input[type=range]::-webkit-slider-runnable-track,
 #jitterLimit::-webkit-slider-runnable-track,
 #edgeError::-webkit-slider-runnable-track,
 #downscaleLevel::-webkit-slider-runnable-track,
 #thresholdBlockSize::-webkit-slider-runnable-track,
 #thresholdOffset::-webkit-slider-runnable-track,
-#lowerHue::-webkit-slider-runnable-track, #upperHue::-webkit-slider-runnable-track,
 #lowerSaturation::-webkit-slider-runnable-track, #upperSaturation::-webkit-slider-runnable-track,
 #lowerValue::-webkit-slider-runnable-track, #upperValue::-webkit-slider-runnable-track {
   width: 100%;
@@ -124,13 +125,23 @@
   border-radius: 1.3px;
   cursor: pointer;
 }
+
+#lowerHue::-webkit-slider-runnable-track, #upperHue::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 4px;
+  background-image: linear-gradient(to right, blue, cyan, green, yellow, red, indigo);
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 0.2px solid #010101;
+  border-radius: 1.3px;
+  cursor: pointer;
+}
+
 .settings-bar input[type=range]::-webkit-slider-thumb,
 #jitterLimit::-webkit-slider-thumb,
 #edgeError::-webkit-slider-thumb,
 #downscaleLevel::-webkit-slider-thumb,
 #thresholdBlockSize::-webkit-slider-thumb,
 #thresholdOffset::-webkit-slider-thumb,
-#lowerHue::-webkit-slider-thumb, #upperHue::-webkit-slider-thumb,
 #lowerSaturation::-webkit-slider-thumb, #upperSaturation::-webkit-slider-thumb,
 #lowerValue::-webkit-slider-thumb, #upperValue::-webkit-slider-thumb {
   width: 9px;
@@ -143,17 +154,33 @@
   border-radius: 3px;
   cursor: pointer;
 }
+
+#lowerHue::-webkit-slider-thumb, #upperHue::-webkit-slider-thumb {
+  width: 9px;
+  height: 20px;
+  -webkit-appearance: none;
+  margin-top: -8px;
+  background: white;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  cursor: pointer;
+}
 .settings-bar input[type=range]:focus::-webkit-slider-runnable-track,
 #jitterLimit:focus::-webkit-slider-runnable-track,
 #edgeError:focus::-webkit-slider-runnable-track,
 #downscaleLevel:focus::-webkit-slider-runnable-track,
 #thresholdBlockSize:focus::-webkit-slider-runnable-track,
 #thresholdOffset:focus::-webkit-slider-runnable-track,
-#lowerHue:focus::-webkit-slider-runnable-track, #upperHue:focus::-webkit-slider-runnable-track,
 #lowerSaturation:focus::-webkit-slider-runnable-track, #upperSaturation:focus::-webkit-slider-runnable-track,
 #lowerValue:focus::-webkit-slider-runnable-track, #upperValue:focus::-webkit-slider-runnable-track {
   background: white;
 }
+
+#lowerHue:focus::-webkit-slider-runnable-track, #upperHue:focus::-webkit-slider-runnable-track {
+  background-image: linear-gradient(to right, blue, cyan, green, yellow, red, indigo);
+}
+
 @media screen and (max-width: 960px) {
   .settings input[type=range] {
     width: 90px;