A Webkit slider that works on the iPad

HTML5 and webkit allows to build custom sliders which work well with the ipad. Nothing delights more iPad users more than those nonchalant swipes, which transform your screen effortlessly. 
Below is a snippet of how to customise the slider. 

NB: This code only works in Chrome and Safari.

 .labSliderContainer input[type='range'] {
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-color:transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003669), 
color-stop(50%,#004484), color-stop(51%,#004484), color-stop(100%,#041e45));
  -webkit-background-size: 20% 100%;
  background-size: 20% 100%;
  height: 20px;
  border-radius: 40px;
  width: 400px;
 }
  .labSliderContainer input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  position: relative;
  top: -1px;
  z-index: 1;
  width: 40px;
  height: 21px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  border: 1px solid #444;
  background-image: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%,#f2f2f2), color-stop(50%,#aaa), color-stop(51%,#aaa), color-stop(100%,#d2d2d2));
 }