Color hue slider

Can Someone Help Me Make The Color Hue Slider, It Has The Id Colorbar. Here is the code.

<!DOCTYPE html>
	<!-- This is based on DillingerLee's great template here:
	https://github.com/Team-Code/KA_Offline -->
	<html> 
	 <head>
		<title>Color Picker</title> 
		<link rel="icon" href="../Top-Logo.png">
	</head>
	<style>
	body {font-family: "Helvetica", sans-serif;}
	.No-Underline {text-decoration: none;}
	h1 {
	text-align: center;
	}
	#Topbar {
	width: 100%;
	height: 75px;
	position: fixed;
	top: 0px;
	background-color: rgb(14, 5, 255)
	}
	#Topbar h1 {
	color: white;
	}
	#Pages {
	float: left;
	height: 870px;
	width: 200px;
	margin-right: 0px;
	border-right: 2px solid rgb(214, 212, 212);
	border-top: 2px solid rgb(214, 212, 212);
	border-bottom: 2px solid rgb(214, 212, 212)
	}
	#About {
	border-right: 2px solid rgb(214, 212, 212);
	border-top: 2px solid rgb(214, 212, 212);
	border-bottom: 2px solid rgb(214, 212, 212);
	height: 870px;
	width: 1700px;
	}
	#About h2 {
	text-align:center;
	}
	#About p {
	font-size: 1.1em;
	}
	.Image-Div {
	border-left: 2px solid rgb(214, 212, 212);
	border-top: 2px solid rgb(214, 212, 212);
	float: right;
	width: 13%;
	height: 92.3%;
	}
	.Text-Div {
	font-size: 1.1em;
	background-color: white;
	border-top: 2px solid rgb(214, 212, 212);
	border-bottom: 2px solid rgb(214, 212, 212);
	float: right;
	width: 75%;
	height: 92%;
	overflow: auto;
	text-align: center; 
	line-height: 250px;
	}
	.Text-Div * {
	margin-left: 13px;
	margin-right: 10px;
	}
	.Content-Button {
	background-color: white;
	border-top: 2px solid rgb(214, 212, 212);
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
	width: 221px;
	height: 50px;
	font-size: 1.3em;
	font-weight: bold;
	cursor: pointer;
	}
	.Content-Button:hover {
	background-color: rgb(219, 219, 219);
	}
	.Page-Button {
	background-color: white;
	border-top: 2px solid rgb(214, 212, 212);
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
	width: 200px;
	height: 50px;
	font-size: 1.3em;
	font-weight: bold;
	cursor: pointer;
	}
	.Page-Button:hover {
	background-color: rgb(219, 219, 219);
	}
	.Select-Button {
	background-color: rgb(180, 228, 237);
	color: rgb(22, 55, 222);
	border-left: 5px solid rgb(22, 55, 222);
	}
	.Select-Button:hover {
	background-color: rgb(149, 203, 240);
	}
	.Reload-Button {
	width: 125px;
	height: 45px;
	background-color: rgb(196, 196, 207);
	border-radius: 10px;
	border: 0px;
	font-weight: bold;
	font-size: 35px;
	color: white;
	cursor: pointer;
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 25px
	}
	.Reload-Button:hover {
	background-color: rgb(141, 141, 148);
	}
	.Warning {
	background-color: red;
	color: rgb(237, 222, 5);
	font-size: 1.3em;
	}
	#Color-Picker {
	display: flex;
	width: 630px;
	height: 300px;
	background-color: white;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	padding: 20px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 200px;
	line-height: 100px;
	}
	#color_canvas {
		border: 2px solid rgb(214, 212, 212);
	}
	#color_canvas:hover {
		border: 2px solid rgb(0, 0, 0);
	}
	#Colorbar {
		border: 2px solid rgb(214, 212, 212);
		height: 295px;
		width: 40px;
		margin: 0px;
	}
	#Colorbar:hover {
		border: 2px solid rgb(0, 0, 0);
	}
	#Color-Word {
	width: 230px;
	height: 100px;
	border: 2px solid rgb(214, 212, 212);
	background-color: white;
	margin-bottom: 20px;
	}
	#Color-Word:hover {
		border: 2px solid rgb(0, 0, 0);
	}
	#Color-Background {
	width: 230px;
	height: 172px;
	border: 2px solid rgb(214, 212, 212);
	background-color: white;
	}
	#Color-Background:hover {
		border: 2px solid rgb(0, 0, 0);
	}
	#marker {
		background: rgba(0, 0, 0, 0);
		border: 3px solid white;
		border-radius: 10px;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
		display: none;
		position: absolute;
		top: 450px;
		left: 600px;
		width: 10px;
		height: 10px;
		cursor: pointer;
	}
	body:has(#marker:hover) #color_canvas {
		border: 2px solid rgb(0, 0, 0);
	}
	</style>

	<body>
	<div id="marker">
	</div>
	<div id="Topbar">
	<center>
	<h1><span>Project At All</span><h1>
	</center>
	</div>
	<h1>Information On Home Page</h1>
	<div id="Pages">
	<h2 style = "text-align: center;">Projects</h2>
	<a class="No-Underline" href="../index2.html"><button class="Page-Button">Home</button></a>
	<button class="Page-Button Select-Button">Color Picker</button>
	</div>
	<div id="About">
	<h2>Color Picker</h2>
		<div class="Image-Div">
		<h2 style = "text-align: center;">Contents</h2>
		<button class="Content-Button Select-Button">Color Picker Page</button>
		<a class="No-Underline" href="./Color_Information.html"><button class="Content-Button">What Is A Color Picker</button></a>
	<a class="No-Underline" href="./Color_Steps.html"><button class="Content-Button">Color Picker Creation Steps</button></a>
		</div>
	<div class="Text-Div">
		<div id="Color-Picker" style="text-align: left;">
		<canvas width="300px" height="300px" id="color_canvas"></canvas>
		<div style=" width:20px; margin: 0px; margin-right: 20px; margin-left: 10px;">
		<canvas id="Colorbar"></canvas>
		</div>
		<div>
		<div id="Color-Word" style="line-height: 20px;">
		<p style = "font-weight: bold; font-size: 1.2em;">RGB:<span id="RGBText"></span></p>
		<p style="font-weight: bold; font-size: 1.2em;">Hex:<span id="HexText"></span></p>
		</div>
		<div id="Color-Background"></div>
		</div>
		</div>
	
	</div>
	</body>
	
	 
	 <script>
		var colorCanvas = document.getElementById('color_canvas');
		var colorSlider = document.getElementById('Colorbar')
		var marker = document.getElementById('marker')
		var isDown = false;
		document.addEventListener('mousedown', function() {
    	isDown = true;
		});

		document.addEventListener('mouseup', function() {
    	isDown = false;
		});
var ColorCtx = colorCanvas .getContext('2d');  // This create a 2D context for the canvas
var SliderCtx = colorSlider .getContext('2d')

// Canvas Section
var color = 'rgba(0,0,255,1)';
let gradientH = ColorCtx .createLinearGradient(0, 0, ColorCtx .canvas.width, 0);
gradientH.addColorStop(0, '#fff');
gradientH.addColorStop(1, color);
ColorCtx .fillStyle = gradientH;
ColorCtx .fillRect(0, 0, ColorCtx .canvas.width, ColorCtx .canvas.height);


// Create a Vertical Gradient(white to black)
 let gradientV = ColorCtx .createLinearGradient(0, 0, 0, 300);
 gradientV.addColorStop(0, 'rgba(0,0,0,0)');
 gradientV.addColorStop(1, '#000');
 ColorCtx .fillStyle = gradientV;
 ColorCtx .fillRect(0, 0, ColorCtx .canvas.width, 
 ColorCtx .canvas.height);
 
	const selectedColor = document.getElementById("Color-Background");
	function rgb2hex(rgb) {
	rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
	function hex(x) {
	return ("0" + parseInt(x).toString(16)).slice(-2);
	}
	return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
	}
	function pick(event, destination) {
	if (isDown == true) {
		const bounding = colorCanvas.getBoundingClientRect();
		const x = event.clientX - bounding.x;
		const y = event.clientY - bounding.y;
		const pixel = ColorCtx.getImageData(x, y, 1, 1);
		const data = pixel.data;

		const rgb = `rgb(${data[0]}, ${data[1]}, ${data[2]})`;

		[red, green, blue] = rgb.substring(rgb.indexOf('(') + 1, rgb.lastIndexOf(')')).split(/,\s*/),
		// passing the variables into the Object Literal; in this instance
		// we're passing in the variables which are the literal name of the
		// properties they define and which also contain the relevant value:
		colorObject = {
			red,
			green,
			blue
		};
		mousePosition = {
			x : event.clientX,
			y : event.clientY
		};
		destination.style.background = rgb;
		document.getElementById('RGBText').textContent = (red + ', ' + green + ', ' + blue);
		document.getElementById('HexText').textContent = rgb2hex(rgb);
		marker.style.display = "block";
		marker.style.left = (mousePosition.x - 5) + 'px';
		marker.style.top = (mousePosition.y - 5) + 'px';
		return rgb;
	};
};
function pick2(event, destination,) {
const bounding = colorCanvas.getBoundingClientRect();
const x = event.clientX - bounding.x;
const y = event.clientY - bounding.y;
const pixel = ColorCtx.getImageData(x, y, 1, 1);
const data = pixel.data;

const rgb = `rgb(${data[0]}, ${data[1]}, ${data[2]})`;

[red, green, blue] = rgb.substring(rgb.indexOf('(') + 1, rgb.lastIndexOf(')')).split(/,\s*/),
// passing the variables into the Object Literal; in this instance
// we're passing in the variables which are the literal name of the
// properties they define and which also contain the relevant value:
colorObject = {
red,
green,
blue
};
mousePosition = {
x : event.clientX,
y : event.clientY
};
destination.style.background = rgb;
document.getElementById('RGBText').textContent = (red + ', ' + green + ', ' + blue);
document.getElementById('HexText').textContent = rgb2hex(rgb);
marker.style.display = "block";
marker.style.left = (mousePosition.x - 5) + 'px';
marker.style.top = (mousePosition.y - 5) + 'px';
return rgb;
};
colorCanvas.addEventListener("click", (event) => pick2(event, selectedColor))
colorCanvas.addEventListener("mousemove", (event) => pick(event, selectedColor))
//Slider Section
let gradient = SliderCtx .createLinearGradient(0, 0, 0, SliderCtx . canvas.height);
gradient.addColorStop(0, "rgb(255, 0, 0)");
gradient.addColorStop(0.15, "rgb(255, 0, 255)");
gradient.addColorStop(0.33, "rgb(0, 0, 255)");
gradient.addColorStop(0.49, "rgb(0, 255, 255)");
gradient.addColorStop(0.67, "rgb(0, 255, 0)");
gradient.addColorStop(0.84, "rgb(255, 255, 0)");
gradient.addColorStop(1, "rgb(255, 0, 0)");
SliderCtx .fillStyle = gradient;
SliderCtx .fillRect(0, 0, SliderCtx .canvas.width, SliderCtx .canvas.height);
	 </script>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.