<![CDATA[Syntyl - The Lab]]>Sun, 09 Apr 2023 00:46:15 -0700Weebly<![CDATA[A Webkit slider that works on the iPad]]>Tue, 12 Feb 2013 15:34:11 GMThttps://www.syntyl.com/the-lab/a-webkit-slider-that-works-on-the-ipadHTML5 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));
 }
]]>