.ba-slider {
  position: relative;
  overflow: hidden;
}
.ba-slider img {
  width: 100%;
  display: block;
}
.resize {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
}
.handle {
  /* Lijn */
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 10px;
  margin-left: -2px;
  background: gray;
    background: -webkit-linear-gradient(left,rgba(0,0,0,0.5),rgba(0,0,0,0)); /*Safari 5.1-6*/
  background: -o-linear-gradient(right,rgba(0,0,0,0.5),rgba(0,0,0,0)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(right,rgba(0,0,0,0.5),rgba(0,0,0,0)); /*Fx 3.6-15*/
  background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /*Standard*/
  cursor: ew-resize;
    
    
}
.handle:after {
  /* Knop  */
  position: absolute;
  top: 90%;
  width: 30px;
  height: 90px;
  margin: -32px 0 0 -40px;
  content: '\2039\00a0\00a0\203A';
  font-family:arial;  
    
  color: #f7a600;
  font-weight: bold;
  font-size: 70px;
  text-align: center;
  line-height: 57px;
  background: none;
  /* @orange */
  border: 0px solid #f7a600;
  /* darken(@orange, 5%) */
  
  
  /* lighten(@orange, 20%)*/
}
.draggable:after {
  width: 30px;
  height: 90px;
  margin: -32px 0 0 -40px;
  line-height: 57px;
  font-size: 70px;
}
