3 Way Toggle

by kthornbloom

HTML

<div class="tw-toggle">

  <input type="radio" id="state1" name="tw-input" value="low">
  <label for="state1">LO</label>

  <input type="radio" id="state2" name="tw-input" value="medium">
  <label for="state2">MED</label>

  <input type="radio" id="state3" name="tw-input" value="high">
  <label for="state3">HI</label>

  <span></span>

</div>

<br><br>

<div id="icon-set">

</div>

SCSS

.tw-toggle {
  border-radius: 30px;
  border: 2px solid #666;
  display: flex;
  height: 40px;
  position: relative;
  user-select: none;
  width: 120px;
  label {
    align-items: center;
    border-radius: 50%;
    color: #666;
    display: flex;
    font-family: sans-serif;
    font-size: 11px;
    font-weight: bold;
    height: 40px;
    justify-content: center;
    position: relative;
    transition: color 250ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    width: 40px;
    z-index: 1;
  }
  label:hover {
    color: #222;
    cursor: pointer;
  }
  span {
    background: #2A80A8;
    border-radius: 50%;
    height: 36px;
    margin: 2px;
    opacity: 0;
    position: absolute;
    transition: left 250ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    width: 36px;
  }
  input {
    display: none;
  }
  input:checked+label {
    color: #fff;
  }
}

#state1:checked~span {
  left: 0px;
  opacity: 1;
}

#state2:checked~span {
  left: 40px;
  opacity: 1;
}

#state3:checked~span {
  left: 80px;
  opacity: 1;
}

#icon-set {
  height: 50px;
  width: 50px;
}

.show-low {
  background: yellow;
}

.show-medium {
  background: orange;
}

.show-high {
  background: red;
}

JavaScript

for (var radioCounter = 0 ; radioCounter < document.getElementsByName('tw-input').length; radioCounter++) {
      document.getElementsByName('tw-input')[radioCounter].onclick = function() {
      	var iconSet = document.getElementById('icon-set');
        if (this.value == "low"){
        	iconSet.className = '';
          iconSet.classList.add('show-low');
        } else if (this.value == "medium"){
        	iconSet.className = '';
          iconSet.classList.add('show-medium');
        } else if (this.value == "high"){
        	iconSet.className = '';
          iconSet.classList.add('show-high');
        }
      }
}