From c72e66b2e0cf0fe4ba45120576f5cb2060c550bd Mon Sep 17 00:00:00 2001
From: Aleksandra Zhuravleva <aleksandra.zhuravleva@intel.com>
Date: Fri, 8 Nov 2019 23:39:15 +0200
Subject: [PATCH] [Color segmentation] Apply linear gradient to Hue slider
 background to see captured color range

---
 samples/css/settings.css | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/samples/css/settings.css b/samples/css/settings.css
index 8c3c6f2..d7107a9 100644
--- a/samples/css/settings.css
+++ b/samples/css/settings.css
@@ -100,6 +100,7 @@
 .pro-settings input[type=range] {
   width: 200px;
 }
+
 .settings-bar input[type=range]:focus,
 #jitterLimit:focus, #edgeError:focus, #downscaleLevel:focus,
 #thresholdBlockSize:focus, #thresholdOffset:focus,
@@ -107,13 +108,13 @@
 #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;