A CodePen by Sara Soueidan. CSS3 Multiple-Choice “Windowed Slider” UI - Based on Chris Norström's Article here: http://www.chrisnorstrom.com/2012/11/invention-multiple-choice-windowed-slider-ui/

index.html

<div class="wrapper-1">
  <div class="container">
    <input type="checkbox" id="check" class="checkbox"/>
    <label for="check"></label>
    <div class="left">NO</div>
    <div class="right">YES</div>
    <div class="slider"></div>
  </div>
  
  <div class="container container-3">
    <input type="checkbox" id="check3" class="checkbox" checked/>
    <label for="check3"></label>
    <div class="left left3"><span>OFF</span></div>
    <div class="right right3"><span>ON</span></div>
    <div class="slider slider3"></div>
  </div>

  <div class="container container-2">
    <input type="checkbox" id="check2" class="checkbox"/>
    <label for="check2"></label>
    <div class="left left2">OFF</div>
    <div class="right right2">ON</div>
    <div class="slider slider2"></div>
  </div>

</div><!--end .wrapper-1-->

<div class="wrapper-2">
  <div class="container list">
    <input type="radio" name="list-radio" id="radio-one" class="radio"/>
    <label for="radio-one"></label>
    <div class="list-item">This is a vertical</div>
    <input type="radio" name="list-radio" id="radio-two" class="radio"  checked/>
    <label for="radio-two"></label>
    <div class="list-item">windowed toggle slider</div>
    <input type="radio" name="list-radio" id="radio-three" class="radio"/>
    <label for="radio-three"></label>
    <div class="list-item">
    using radio buttons</div>
    <input type="radio" name="list-radio" id="radio-four" class="radio"/>
    <label for="radio-four"></label>
    <div class="list-item">
    instead of checkboxes</div>
    <input type="radio" name="list-radio" id="radio-five" class="radio"/>
    <label for="radio-five"></label>
    <div class="list-item">
    to select an option</div>
    <div class="slider slider-list"></div>
  </div>
</div><!--end .wrapper-2-->

script.js

/*Chris Norström is a User Interface Designer & Inventor, and in his article he says (and I agree):

" ......When a user ponders, “Does the description describe the ‘current state’ or an ‘action I can take’?” the UI has failed to work and is too complex for such a simple action."

and FORM THERE, he came up with this "windowed" slider thing, and this is an implementation of that idea.
*/

style.css

body{
  background:url('http://subtlepatterns.com/patterns/light_toast.png') repeat;
  width:1000px;
  margin:0 auto;
  text-shadow:1px 1px 0 white;
}
.wrapper-1, .wrapper-2 {
  float:left;
  margin:30px 60px 100px 0;
}
.wrapper-2{
margin-left:50px;
}
.container{
  height:100px; 
  width:240px; 
  margin:10px auto 50px;
  background:linear-gradient(#d3d3d3,#F3F3F3, #d5d5d5);
  border-radius:30px;
  box-shadow: 
    inset 0 1px 0 1px #8B8B8B,
    0 1px 0 1px white;
  position:Relative;
  padding:2px;
}
.right, .left{
  width:120px;
  float:left; 
  text-align:center; 
  line-height:100px;
  font-size:2.5em;
  text-shadow:2px 2px 0 white;
  border-radius:50px;
  transition:all 0.2s linear;
  font-weight:bold;
  font-family:helvetica;
}
.left{
  color:red;
}
.right{
  color:grey;
}
.slider{
  width:100px; 
  border:10px solid #9D6E90; 
  height:76px; 
  border-radius:25px;
  position:absolute;
  left:4px;
  top:5px;
  box-shadow:
    inset 0 1px 1px 1px #656565,
    0 0 0 2px #BBBBBB;
  background:rgba(9,9,9,0.08);
  transition: all 0.3s ease-out;
}
.slider2 {
  border-color:#84BD4A;
}
.slider3 {
  border:none;
  width:120px; 
  height:96px;
  background:linear-gradient(#990000, #ee0000);
  box-shadow:0 0 0 2px #BBBBBB, inset 0 0 10px 5px #990000;
}

.checkbox, .radio{
  display:none;
}
label{
  display:block; 
  position:absolute; 
  z-index:999; 
  height:100%; 
  width:100%; 
  cursor:pointer;
}
#check:checked ~ .slider{left:120px;}
#check2:checked ~ .slider2{left:120px;}
#check3:checked ~ .slider3{left:120px;}

#check:checked ~ .left{color:grey;}
#check2:checked ~ .left2{color:grey;}
#check3:checked ~ .left3{color:grey;}

#check:checked ~ .right{
  color:green; text-shadow: 0 0 10px green;}
#check2:checked ~ .right2{
  color:green; text-shadow: 0 0 10px green;}
#check3:checked ~ .right3{
  color:green; text-shadow: 0 0 10px green;}
#check3:checked ~ .slider3{
  background:linear-gradient(#005800,#009900);
  box-shadow: inset 0 0 10px 5px #005800
}

.container.list{
  height:300px;
  width:498px;
  background: #dfdfd1;
  color:#555;
}
.list-item{
  display:block;
  float:none;
  width:100%;
  height:42px;
  line-height:40px;
  margin:15px 0;
  text-align:center;
  font: bold 1.5em/1.8 "Helvetica";
  border-radius:40px;
}
.slider-list{
  width:476px;
  height:45px;
  border-color:#2FBFBF;
}
#radio-one:checked ~ .slider-list{top:5px;}
#radio-two:checked ~ .slider-list {top:62px;}
#radio-three:checked ~ .slider-list {top:119px;}
#radio-four:checked ~ .slider-list {top:176px;}
#radio-five:checked ~ .slider-list {top:233px;}


.container-3 .left > span {
  position:absolute; left:-90px;
}
.container-3 .right > span {
  position:absolute; 
  left:260px;
}