Color Hue Slider For Color Picker

Can you help me with this, I tried many different solutions, none of them worked, and nobody on stackflow knew why. So I deleted it, so can you try give me the code, for the hue slider in this color picker, the id of the hue slider is “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>

We cannot write the code for you, but if you can talk to us about what this code is for and how it’s not working, we ta try to help you fix it.

Can someone help me, I tried before, it just doesn’t work, so I went to ask for a start code for it to try again