HSV sliders option instead of color picker.

wled00/data/index.css

@@ -362,6 +362,12 @@ button {
 #fx {
 	height: calc(100% - 121px);
 	overflow-y: scroll;
+	padding-left: 6px; /* compensate scroll bar */
+}
+
+#sliders {
+	width: 310px;
+	margin: 0 auto;
 }
 
 #sliders .labels {

wled00/data/index.htm

@@ -88,6 +88,20 @@
 <div class ="container">
 	<div id="Colors" class="tabcontent">
 		<div id="picker" class="noslide"></div>
+		<div id="hwrap">
+			<!--p class="labels hd">Hue</p-->
+			<div class="sliderwrap il">
+				<input id="sliderH" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
+				<div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
+			</div><br>
+		</div>
+		<div id="swrap">
+			<!--p class="labels hd">Saturation</p-->
+			<div class="sliderwrap il">
+				<input id="sliderS" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any">
+				<div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div>
+			</div><br>
+		</div>
 		<div id="vwrap">
 			<!--p class="labels hd">Value</p-->
 			<div class="sliderwrap il">

wled00/data/index.js

@@ -1038,8 +1038,10 @@ function updateUI()
 	var ccfg = cfg.comp.colors;
 	gId('hexw').style.display = ccfg.hex ? "block":"none";    // HEX input
 	gId('picker').style.display = (hasRGB && ccfg.picker) ? "block":"none"; // color picker wheel
-	gId('vwrap').style.display = (hasRGB && ccfg.picker) ? "block":"none";  // brightness (value) slider
+	gId('hwrap').style.display = (hasRGB && !ccfg.picker) ? "block":"none"; // color picker wheel
-	gId('kwrap').style.display = (hasRGB && !hasCCT && ccfg.picker) ? "block":"none"; // Kelvin slider
+	gId('swrap').style.display = (hasRGB && !ccfg.picker) ? "block":"none"; // color picker wheel
+	gId('vwrap').style.display = (hasRGB /*&& ccfg.picker*/) ? "block":"none";  // brightness (value) slider
+	gId('kwrap').style.display = (hasRGB && !hasCCT /*&& ccfg.picker*/) ? "block":"none"; // Kelvin slider
 	gId('rgbwrap').style.display = (hasRGB && ccfg.rgb) ? "block":"none";   // RGB sliders
 	gId('qcs-w').style.display = (hasRGB && ccfg.quick) ? "block":"none";   // quick selection
 	//gId('palw').style.display = hasRGB ? "block":"none";                    // palettes
@@ -2110,14 +2112,21 @@ function updatePSliders() {
 	gId('hexc').value = str;
 	gId('hexcnf').style.backgroundColor = "var(--c-3)";
 
-	// update value slider
+	// update HSV sliders
-	var v = gId('sliderV');
+	var c;
-	v.value = cpick.color.value;
+	let h = cpick.color.hue;
-	// background color as if color had full value
+	let s = cpick.color.saturation;
-	var hsv = {"h":cpick.color.hue,"s":cpick.color.saturation,"v":100}; 
+	let v = cpick.color.value;
-	var c = iro.Color.hsvToRgb(hsv);
+
-	var cs = 'rgb('+c.r+','+c.g+','+c.b+')';
+	gId("sliderH").value = h;
-	v.nextElementSibling.style.backgroundImage = `linear-gradient(90deg, #000 -15%, ${cs})`;
+	gId("sliderS").value = s;
+	gId('sliderV').value = v;
+
+	c = iro.Color.hsvToRgb({"h":h,"s":100,"v":100});
+	gId("sliderS").nextElementSibling.style.backgroundImage = 'linear-gradient(90deg, #aaa -15%, rgb('+c.r+','+c.g+','+c.b+'))';
+
+	c = iro.Color.hsvToRgb({"h":h,"s":s,"v":100});
+	gId('sliderV').nextElementSibling.style.backgroundImage = 'linear-gradient(90deg, #000 -15%, rgb('+c.r+','+c.g+','+c.b+'))';
 
 	// update Kelvin slider
 	gId('sliderK').value = cpick.color.kelvin;
@@ -2154,6 +2163,16 @@ function setPicker(rgb) {
 	updateTrail(gId('sliderB'));
 }
 
+function fromH()
+{
+	cpick.color.setChannel('hsv', 'h', gId('sliderH').value);
+}
+
+function fromS()
+{
+	cpick.color.setChannel('hsv', 's', gId('sliderS').value);
+}
+
 function fromV()
 {
 	cpick.color.setChannel('hsv', 'v', gId('sliderV').value);

wled00/wled.h

@@ -8,7 +8,7 @@
  */
 
 // version code in format yymmddb (b = daily build)
-#define VERSION 2204241
+#define VERSION 2204261
 
 //uncomment this if you have a "my_config.h" file you'd like to use
 //#define WLED_USE_MY_CONFIG