HSB Slider

by Noreh AD

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<canvas id="primary"></canvas>
<input type="range" min="0" max="360" step="1" value="0" tabindex="1" id="secondary" />

CSS

#primary {
	display: block;
	border: 1px solid gray;
}
#secondary {
	width: 256px;
	height: 15px;
	margin-top: 15px;
	outline: 0;
	display: block;
	border: 1px solid gray;
	box-sizing: border-box;
	-webkit-appearance: none;
	background-image: linear-gradient(to right, red 0%, yellow 16.66%, lime 33.33%, cyan 50%, blue 66.66%, violet 83.33%, red 100%);
}
#secondary::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 25px;
	width: 10px;
	border-radius: 10px;
	background-color: rgb(230,230,230);
	border: 1px solid gray;
	box-shadow: inset 0 0 2px rgba(255,255,255,1), 0 0 2px rgba(255,255,255,1);
}

JavaScript

var canvas = document.getElementById("primary");
var context = canvas.getContext("2d");

canvas.width = 256;
canvas.height = 256;

function fillPrimary(hue) {
	var brightness = context.createLinearGradient(0, 0, 0, 256);
  brightness.addColorStop(0, "white");
  brightness.addColorStop(1, "black");

  var saturation = context.createLinearGradient(0, 0, 256, 0);
	saturation.addColorStop(0, "hsla(" + hue + ",100%,50%,0)");
	saturation.addColorStop(1, "hsla(" + hue + ",100%,50%,1)");

	context.fillStyle = brightness;
	context.fillRect(0, 0, 256, 256);
  
	context.fillStyle = saturation;
	context.globalCompositeOperation = "multiply";
	context.fillRect(0, 0, 256, 256);
	context.globalCompositeOperation = "source-over";
}

fillPrimary(0);

$("#secondary").on("input", function() {
	fillPrimary(this.value);
});