Slide to Check
How do I make an slide to check?
A mobile friendly interactive checkbox. Slide or tap the checkbox to toggle it.. What is a slide to check? How do you make a slide to check? This script and codes were developed by Joey Hoer on 14 September 2022, Wednesday.
Slide to Check - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slide to Check</title> <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ [type=checkbox] { appearance: none; width: 50%; height: 100%; top: 0; border-radius: inherit; background-color: #999; background-image: linear-gradient( hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.4) ); cursor: pointer; left: 0; transition: left 0.5s; position: absolute; box-sizing: border-box; border: solid 1px hsl(0, 0%, 35%); box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, 0.2), inset 0 -1px 1px hsla(0, 0%, 0%, 0.2), 0 1px 4px hsla(0, 0%, 0%, 0.5); z-index: 1;
}
[type=checkbox]:checked { left: 50%;
}
label.track { position: relative; display: inline-block; width: 100px; height: 40px; box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.75); background-color: hsl(0, 0%, 80%); background-image: linear-gradient( to left, hsla(0, 0%, 55%, 0.75) 50%, transparent 50% ), linear-gradient( hsl(0, 0%, 65%), hsl(0, 0%, 85%) ); border-radius: 10px; margin: 3px;
}
body { background-color: hsl(142, 70%, 70%);
}
/* Center */
html,body{height:100%;}html{display:table;width:100%;}body{display:table-cell;vertical-align:middle;text-align:center;} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <input type='checkbox' checked> <script src="js/index.js"></script>
</body>
</html>
Slide to Check - Script Codes CSS Codes
[type=checkbox] { appearance: none; width: 50%; height: 100%; top: 0; border-radius: inherit; background-color: #999; background-image: linear-gradient( hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.4) ); cursor: pointer; left: 0; transition: left 0.5s; position: absolute; box-sizing: border-box; border: solid 1px hsl(0, 0%, 35%); box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, 0.2), inset 0 -1px 1px hsla(0, 0%, 0%, 0.2), 0 1px 4px hsla(0, 0%, 0%, 0.5); z-index: 1;
}
[type=checkbox]:checked { left: 50%;
}
label.track { position: relative; display: inline-block; width: 100px; height: 40px; box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.75); background-color: hsl(0, 0%, 80%); background-image: linear-gradient( to left, hsla(0, 0%, 55%, 0.75) 50%, transparent 50% ), linear-gradient( hsl(0, 0%, 65%), hsl(0, 0%, 85%) ); border-radius: 10px; margin: 3px;
}
body { background-color: hsl(142, 70%, 70%);
}
/* Center */
html,body{height:100%;}html{display:table;width:100%;}body{display:table-cell;vertical-align:middle;text-align:center;}
Slide to Check - Script Codes JS Codes
function startDrag(el) { if (!el.dragData) { var ecx = event.clientX||event.touches[0].clientX; el.dragData={ x: ecx-el.offsetLeft }; };
}
function drag(el) { if (el.dragData) { el.isDragging = true; var ecx = event.clientX||event.touches[0].clientX; el.style.setProperty('-webkit-transition', 'none'); if (ecx-el.dragData.x >= 0 && ecx-el.dragData.x <= el.parentNode.offsetWidth-el.offsetWidth) { el.style.setProperty('left', ecx-el.dragData.x+'px'); } }
}
function stopDrag(el) { if (el.isDragging) { if (event.type == 'mouseup' || event.type == 'touchend' ) { el.addEventListener('click', function(e){e.preventDefault();this.removeEventListener('click', arguments.callee, false)}, false); } el.isDragging = false; } if (el.dragData) { if ((el.offsetLeft+(el.offsetWidth/2)) >= (el.parentNode.offsetWidth/2)) { el.checked = true; } else { el.checked = false; } el.style.removeProperty('-webkit-transition'); el.style.removeProperty('left'); el.dragData = null; }
}
var inputs = document.getElementsByTagName('input');
for (var i=0; i<inputs.length; i++) { var input = inputs[i]; if (input.hasAttribute('type') && input.attributes['type'].value == 'checkbox') { var checkbox = input; var track = document.createElement('label'); track.className='track'; track.appendChild(checkbox.cloneNode(true)); checkbox.parentNode.replaceChild(track, checkbox); checkbox = track.firstChild; checkbox.addEventListener( 'mousedown', function(){startDrag(this)}, false); checkbox.addEventListener('touchstart', function(){startDrag(this)}, false); checkbox.addEventListener( 'mousemove', function(){ drag(this)}, false); checkbox.addEventListener( 'touchmove', function(){ drag(this)}, false); checkbox.addEventListener( 'mouseup', function(){ stopDrag(this)}, false); checkbox.addEventListener( 'mouseout', function(){ stopDrag(this)}, false); checkbox.addEventListener( 'touchend', function(){ stopDrag(this)}, false); }
}
Developer | Joey Hoer |
Username | joeyhoer |
Uploaded | September 14, 2022 |
Rating | 3.5 |
Size | 3,362 Kb |
Views | 30,360 |
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!
Name | Size |
Mirrored Background | 3,114 Kb |
Flexagons | 5,023 Kb |
Example SVGZ Data URI | 2,981 Kb |
CSS Middle Child Selector | 3,337 Kb |
Responsive Text with Viewport Units | 65,818 Kb |
3D Text | 3,862 Kb |
SCSS Star Badges | 6,810 Kb |
SVG Faux-Conical Gradient | 6,531 Kb |
Flexible Rounded Hexagons | 3,463 Kb |
Fluid Hexagonal Grid | 4,453 Kb |
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!
Name | Username | Size |
Animated skewed panes | NyX | 4,462 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
Email Marketing Mock | Kristenzirkler | 8,224 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Flex Chart | James_zedd | 4,111 Kb |
Bubble animation | Ftabor | 6,565 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!