Ползунок для выбора времени

$("label") 
  .click(function() { 
    var nowBox = parseInt(this.htmlFor); 
    $("#" + nowBox + "box").prop("checked", false) 
    while (nowBox != 1) { 
      nowBox--; 
      $("#" + nowBox + "box").prop("checked", true) 
    } 
    nowBox = parseInt(this.htmlFor) 
    while (nowBox != 6) { 
      nowBox++; 
      $("#" + nowBox + "box").prop("checked", false) 
    } 
  })

input { 
  display: none; 
} 
 
label { 
  width: 25px; 
  height: 25px; 
  border-radius: 12.5px; 
  float: left; 
  position: relative; 
  background-color: rgb(33, 87, 196); 
  box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.75); 
} 
 
.line { 
  width: 50px; 
  height: 5px; 
  margin-top: 9.5px; 
  float: left; 
  background-color: rgb(33, 87, 196); 
  box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.75); 
} 
 
p { 
  font-size: 16px; 
  position: absolute; 
  bottom: -30px; 
} 
 
input:checked+.line, 
input:checked+label, 
input:checked+.line+label { 
  background-color: #fff; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="checkbox" id="1box" cheked> 
<label for="1box"> 
  <p>box1</p></label> 
<input type="checkbox" id="2box"> 
<div class="line"></div> 
<label for="2box"> 
  <p>box2</p></label> 
<input type="checkbox" id="3box"> 
<div class="line"></div> 
<label for="3box"> 
  <p>box3</p></label> 
<input type="checkbox" id="4box"> 
<div class="line"></div> 
<label for="4box"> 
  <p>box4</p></label> 
<input type="checkbox" id="5box"> 
<div class="line"></div> 
<label for="5box"> 
  <p>box5</p></label> 
<input type="checkbox" id="6box"> 
<div class="line"></div> 
<label for="6box"> 
  <p>box6</p></label>