three position toggle

by borisjavier

HTML

<div class="toggle3-switch">
  <input type="radio" id="toggle3radio1" class=radio1 name="toggle3" value="rejeitado"/>
  <input type="radio" id="toggle3radio2" class=radio2 name="toggle3" value="pendente"/>
  <input type="radio" id="toggle3radio3" class=radio3 name="toggle3" value="ativo" checked />
  <div class=topLabelContainer>
    <label class=labelTop1 for="toggle3radio1">R
      </label><label class=labelTop2 for="toggle3radio2">P
      </label><label class=labelTop3 for="toggle3radio3">A</label>
  </div>
  <span class=labelLeft> 
    </span><span class=sliderContainer>
    <label class="label1" for="toggle3radio1"></label>
    <label class="label2" for="toggle3radio2"></label>
    <label class="label3" for="toggle3radio3"></label>
    <span class="slider"></span>
  </span>


  <div class="content1">
    <p id="status"></p>
  </div>
</div>

CSS

/*test of 3 position toggle switch*/
body{
  font-family: 'Raleway', sans-serif;
}

.toggle3-switch {
  margin:auto;
  position:relative;
  text-align:center;
  font-size:2em;
}
.radio1,
.radio2,
.radio3 {
  position: absolute;
  /*top: -9999px; - don't use may cause focus/scolling issues*/
  left: -9999px
}
.topLabelContainer{
  margin:auto;
  padding-left:6.5em; /*must match .labelLeft width + padding*/
}
.labelTop1,.labelTop2,.labelTop3{
  width:2em;
  margin:auto;
  padding:0 1px 0 1px;
  display:inline-block;
  text-align:center;
}
.labelLeft{
  width:6em;  /*must match .topLabelContainer margin-left*/
  height:1.3em;
  padding-right:.5em;
  position:relative;
  display:inline-block; 
  vertical-align:middle;
  text-align:right;
  
}
.sliderContainer{
  height: 1.4em;
  width: 5.4em;
  margin: 2px auto;
  position: relative;
  padding: 2px;
  display: inline-block;
  border-radius: 40px;
}


.label1,
.label2,
.label3 {
  height: 100%;
  width: 100%;
  padding: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgb(200, 200, 200);
  border-radius: 40px;
}
.radio1:checked ~ span .label1,
.radio1:checked ~ span .label3,
.radio2:checked ~ span .label1,
.radio2:checked ~ span .label2,
.radio3:checked ~ span .label2,
.radio3:checked ~ span .label3 {
  /*hide labels */
  position: absolute;
  /*top: -9999px;*/
  left: -9999px
}
.slider {
  width: 1.4em;
  height: 1.4em;
  margin: 4px;
  position: absolute;
  display: inline-block;
  pointer-events: none; /*ie fallback may be required */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:rgb(0,0,0);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 40px;
}

.radio2:checked ~ span .slider {
  -webkit-transform: translateX(2em);
  -ms-transform: translateX(2em);
  transform: translateX(2em);
}

.radio3:checked ~ span .slider {
  -webkit-transform: translateX(4em);
  -ms-transform: translateX(4em);
  transform: translateX(4em);
}

.content1{
  height:3em;
 ...

JavaScript

const status = document.getElementById('status');


if (document.querySelector('input[name="toggle3"]')) {
  document.querySelectorAll('input[name="toggle3"]').forEach((elem) => {
    elem.addEventListener("change", function(event) {
      var item = event.target.value;
      console.log(item);
      status.innerHTML = item.charAt(0).toUpperCase() + item.slice(1);
    });
  });
}