Neumorphic switch button

Below is CSS file Code. 

Switch Button Animation

You can learn here,

JavaScript Function to Change Background Color with Input Range Sliders.

HTML Code

Below is HTML file Code.

<body>
    <form>
    	<input type="range" name="brightness" id="brightness" min="1" max="100" value="100">
    </form>
</body> 

CSS Code

* {
	border:0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: calc(48px + 24 * (100vw - 320px)/(1280 -320));
}
body, form {
	display: flex;
}
body {
	--l1: hsl(228,9.8%,100%);
	--l2: hsl(228,9.8%,90%);
	--l3: hsl(228,9.8%,63%);
	--p: hsl(120,90.4%,44.9%);
	--pT: hsl(120,90.4%,44.9%,0);
	background-color: var(--l2);
	height: 100vh;
}
form, input[type=range] {
	margin:auto;
}
form {
	height: 6em;
}
input[type=range] {
	cursor: pointer;
	height: 1.5em;
	width: 6em;
	box-shadow: -0.1em -0.1em 0.1em var(--l3) inset,
				 0.1em 0.1em 0.1em var(--l1) inset;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	background-color: transparent;
	border-radius: 0.75em;
}

input[type=range]::-webkit-slider-thumb {
	border:0;
	background: linear-gradient(var(--p),
				var(--p)) 70% 50%/20% 5% no-repeat,
				linear-gradient(var(--l2),
				var(--l2)) 70% 50%/20% 15% no-repeat,
				radial-gradient(100% 100% at 50% 50%,
				var(--pT) 14%, var(--p) 15% 19%,
				var(--pT) 20%),
				var(--l2);
	border-radius: 50%;
	width: 1.5em;
	height: 1.5em;
	box-shadow: -0.25em 0 0.5em var(--l3),
				 0.25em 0 0.5em var(--l1);
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
}
input[type=range]:focus {
	outline: transparent;
} 

JS Code

document.addEventListener("DOMContentLoaded", function() {
	let slider = this.getElementById('brightness');
	slider.addEventListener("input",adjustSlider);
	adjustSlider(slider);
});
function adjustSlider(e) {
	let body = document.body,
	switchLightMin = 40,
	switchLightMax = 100,
	tar = e.target || e,
	pct = +tar.value / +tar.max,
	L1 = pct * (switchLightMax - switchLightMin) + switchLightMin,
	L2 = L1 - 10,
	L3 = L1 - 37,
	L = [L1,L2,L3],
	thumbHueMin = 0,
	thumbHueMax = 120,
	thumbHue = pct * (thumbHueMax - thumbHueMin) + thumbHueMin,
	thumbSat = 90.4,
	thumbLight = 44.9,
	thumbHSL = `${thumbHue},${thumbSat}%,${thumbLight}%`;

	// update the Slider Shade
	L.forEach((light,i) => {
		if (light < 0)
			light = 0;
		body.style.setProperty(`--l${i + 1}`,
					`hsl(228,9.8%,${light}%)`);
	});

	// update the Thumb Icon
	body.style.setProperty(`--p`,`hsl(${thumbHSL})`);
	body.style.setProperty(`--pT`,`hsl(${thumbHSL},0)`);
} 

Watch Below Video for Detail Understanding

HTML CSS range slider tutorial, custom range slider with javascript and css

Leave a Reply

Your email address will not be published. Required fields are marked *