Using input[type=range] to create toggles

index.html

<h1>Using <code>input[type=range]</code> to create toggles</h1>
  
 <p>
   <input type="range" value="0" min="0" max="1" step="1">
</p>

rVRWZj.markdown

rVRWZj

A Pen by Tiffany Brown on CodePen.

License.

script.js

var range = document.querySelectorAll('[type=range]');
[].map.call(range, function(r) {
    r.addEventListener('change', function(e) {
     e.target.classList.toggle('active');
  });
});

style.css

body{
  font: 200 24px / 1 sans-serif;
}
h1 {
  font-size: 1em;
  font-weight: inherit;
}
[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #aaa;
  border-radius: 10px;
  border: 1px solid transparent;
  box-shadow: none;
  display: block;
  padding: 2px;
  vertical-align: bottom;
  width: 50px;
  transition: all 100ms linear;
  /* Scaling changes the size without needing to adjust CSS proportions. But you may also need to translate in one or both directions */
  transform: scale(2) translateX(30%);
}

[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border: 0;
  background-color: #fff;
  border-radius: 1000px;
  border: 0;
}

[type=range]::-moz-range-thumb {
  width: .9rem;
  height: .9rem;
  border: 0;
  border-radius: 100px;
  background-color: #fff;
}

[type=range]::-moz-range-track {
  background: transparent;
}

[type=range]::-ms-track {
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

[type=range]::-ms-thumb {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #fff;
}

[type=range].active {
  background: #4caf50;
}

[type=range]::-ms-track,
[type=range]::-ms-fill-lower,
[type=range]::-ms-fill-upper {
  background: transparent;
}

[type=range]:focus {
  outline: none;
  border-color: #f50;
}
[type=range]::-ms-tooltip {
	display: none;
}