body {
	margin: 0;
	padding: 0;
	display: grid;
	place-items: center;
	height: 100vh;
}

.main {
	height: 400px;
	width: 250px;
	background: #333;
	border-radius: 10px;
	display: grid;
	place-items: center;
	color: #fff;
	font-family: verdana;
}

#box {
	height: 40px;
	width: 80%;
	border: none;
	outline: none;
	outline: none;
	border-radius: 50px;
	text-align: center;
}


/* CSS property for slider */
input[type="range"] {
	-webkit-appearance: none;
	height: 10px;
	width: 80%;
	border-radius: 50px;
	outline: none;
}

/* CSS property for slider thumb */
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 25px;
	width: 25px;
	background: #fff;
	border-radius: 50%;
	cursor: pointer;
}

.main #red {
	background: linear-gradient(90deg, #000, red);
}

.main #green {
	background: linear-gradient(90deg, #000, green);
}

.main #blue {
	background: linear-gradient(90deg, #000, blue);
}