Toggle switch

Developer
Martin Banks
Size
2,937 Kb
Views
6,072
  1. Toggle switch Previews
  2. Toggle switch HTML Codes
  3. Toggle switch CSS Codes
  4. Toggle switch JS Codes

How do I make an toggle switch?

What is a toggle switch? How do you make a toggle switch? This script and codes were developed by Martin Banks on 03 January 2023, Tuesday.

Toggle switch Previews
IQ Test

Toggle switch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>toggle switch</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Toggle switch demo</h1>
<p>Experimenting with drag and touch-drag events and a little fun with css</p>
<div class="buttonContainer">	<h2>Draggable</h2>	<div class='track'>	<div class="halfway" ></div>	<div class="target"></div>	</div>
</div>
<div class="buttonContainer">	<h2>Touch enabled</h2>	<div class='track-touch'>	<div class="halfway-touch" ></div>	<div class="target-touch"></div>	</div>
</div> <script src="js/index.js"></script>
</body>
</html>

Toggle switch - Script Codes CSS Codes

body { padding: 20px; margin: 0 auto;	background: #333;	text-align: center;	font-family: sans-serif
}
h1, h2, p {	color: #888;	font-weight: 100;	letter-spacing: 1px;
}
h1 {	margin: 0 auto;	padding: 16px 64px;	display: table;	border-bottom: solid 1px rgba(255,255,255,0.5)
}
.buttonContainer {	display: inline-block;	margin: 50px
}
.track,
.track-touch {	transition: background 0.5s, background-color 0.5s; position: relative; display: inline-block; width: 200px; height: 100px; background: rgba(0,0,0,0.2); margin: 20px auto;	border-radius: 50px;	overflow: hidden;	box-sizing: border-box;	box-shadow: inset 0 4px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(255,255,255,0.4)
}
.halfway,
.halfway-touch { position: absolute;	top: 0;	left: 0; width: 50%; height: 100%; //background: darkred;
}
.target,
.target-touch {	//border: solid 10px rgba(0,0,0,0); height: 80px; width: 80px;	margin: 10px; background: #fff; position: absolute; cursor: pointer;	border-radius: 50px;	box-sizing: border-box;	box-shadow: 0px 16px 16px -8px rgba(0,0,0,0.6),	inset 0 -16px 24px 12px rgba(0,0,0,0.5),	inset 0 8px 4px 8px rgba(255,255,255,1),	inset 0 -4px 4px 0 rgba(0,0,0,1)
}

Toggle switch - Script Codes JS Codes

var ele = document.getElementsByClassName("target")[0];
var track = document.querySelector('.track')	//ele.onmousedown = eleMouseDown;
ele.addEventListener("mousedown", eleMouseDown, false);
var pX;
var startX;
var diff;
var eleX;
var endPos = track.offsetWidth - ele.offsetWidth
let margin = (track.offsetHeight - ele.offsetHeight) / 2
function eleMouseDown(e) {	startX = e.pageX	eleX = ele.offsetLeft	//console.log('start', startX, '\tpX', pX)	stateMouseDown = true;	document.addEventListener("mousemove", eleMouseMove, false);
}
function eleMouseMove(ev) {	pX = ev.pageX;	diff = startX - eleX	//var pY = ev.pageY;	if (pX - diff <= 0) {	ele.style.left = '0px'	} else if (pX - diff + (2*margin) > endPos) {	ele.style.left = endPos - (margin*2) + 'px'	} else {	ele.style.left = pX - diff + 'px'	}	//ele.style.top = pY + "px";	document.addEventListener("mouseup", eleMouseUp, false);	// console.log(pX)
}
function eleMouseUp(e) {	document.removeEventListener("mousemove", eleMouseMove, false);	document.removeEventListener("mouseup", eleMouseUp, false);	ele.style.transition = 'left 0.3s'	if ((pX - diff + (ele.offsetWidth/2) + margin) < (track.offsetWidth/2)) {	ele.style.left = '0px'	track.style.background = ''	} else {	ele.style.left = endPos - (margin*2) + 'px'	track.style.background = 'rgba(100,140,0,1)'	}	setTimeout(() => {	ele.style.transition = ''	}, 300)
}
/*	Touchscreen support	solution seems to work -- further testing required.
*/
var eleTouch = document.getElementsByClassName("target-touch")[0];
let trackTouch = document.querySelector('.track-touch')
var touchX;
eleTouch.addEventListener("touchmove", (e)=>{	e.preventDefault()	let touch = e.targetTouches[0]	touchX = touch.pageX	eleTouch.style.left = touchX - trackTouch.offsetLeft - 50 + 'px'
}, false);
eleTouch.addEventListener('touchend', (e)=>{	eleTouch.style.transition = 'left 0.3s'	//console.log(eleTouch.offsetLeft)	if ((eleTouch.offsetLeft +(eleTouch.offsetWidth/2)) < (trackTouch.offsetWidth/2)) { // need to detect center point	eleTouch.style.left = '0px'	trackTouch.style.background = ''	} else {	//console.log(touchX)	eleTouch.style.left = trackTouch.offsetWidth - (eleTouch.offsetWidth + (margin*2)) + 'px'	trackTouch.style.background = 'rgba(100,140,0,1)'	}	setTimeout(() => {	eleTouch.style.transition = ''	}, 300)
}, false)
/* add click event to toggle */
Toggle switch - Script Codes
Toggle switch - Script Codes
Home Page Home
Developer Martin Banks
Username martin-banks
Uploaded January 03, 2023
Rating 3
Size 2,937 Kb
Views 6,072
Do you need developer help for Toggle switch?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Martin Banks (martin-banks) Script Codes
Name
Card shadow effect
Get slider values
Factory function revisit
Scale text to fit
IOS style shadow
IOS shadow effect with React
A Pen by martin banks
Playing with classes
Staggered vertical tags
RequestAnimationFrame
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!