Skip to content

Instantly share code, notes, and snippets.

@Markshall

Markshall/index.html

Created February 25, 2019 17:20
Show Gist options
  • Save Markshall/60434396bbe6d5e5f23c7b2342ac7a42 to your computer and use it in GitHub Desktop.
Save Markshall/60434396bbe6d5e5f23c7b2342ac7a42 to your computer and use it in GitHub Desktop.
Download ZIP
iOS Range Toggle Sliders
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>Document</title>
<style>
.range-toggle {
-webkit-appearance: none;
appearance: none;
width: 50px;
height: 25px;
outline: none;
background-color: #fff;
border: 2px solid #e6e6e6;
border-radius: 25px;
transition: background-color .3s cubic-bezier(0.61, -0.1, 0, 1.49);
pointer-events: none;
position: relative;
}
.range-toggle.active {
background-color: #4dde5e;
}
.range-toggle::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 2px 6px 2px rgba(50, 50, 50, .2);
cursor: pointer;
pointer-events: all;
}
.range-toggle::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 2px 6px 2px rgba(50, 50, 50, .2);
cursor: pointer;
pointer-events: all;
}
/* helper styles */
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font: 400 15px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
p {
flex: none;
max-width: 700px;
text-align: center;
}
.range-toggles {
display: flex;
}
</style>
</head>
<body>
<div class="range-toggles">
<input type="range" class="range-toggle" value="0" min="0" max="1" />
<input type="range" class="range-toggle" value="0" min="0" max="1" />
<input type="range" class="range-toggle" value="1" min="0" max="1" />
<input type="range" class="range-toggle" value="0" min="0" max="1" />
<input type="range" class="range-toggle" value="1" min="0" max="1" />
</div>
<script>
document.querySelectorAll('.range-toggle').forEach(function(el, i) {
if (el.value === '1') el.classList.add('active'); //for sliders that are value=1 on page load
el.addEventListener('mousedown', function(e) {
var hasDragged = !1,
initVal = el.value;
el.onmousemove = function() {hasDragged = 1;}
el.onmouseup = function(e) {
!hasDragged && (el.value = el.value==='1' ? '0' : '1');
(initVal != el.value) && el.classList.toggle('active');
hasDragged = !1;
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment