draggable iOS-like switch (webkit-only, also works in iOS safari)

dabblet.css

/* draggable iOS-like switch (webkit-only, also works in iOS safari) */

/* Don't get your hopes up for using this in anything else besides
 * webkittys, ::webkit-slider-thumb is proprietary.
 * Here's some more info if you're interested:
 * http://davidbcalhoun.com/2011/implementing-iphone-slider-unlock-with-input-type-range
 * http://css-tricks.com/almanac/properties/a/appearance/
 */

.switch {
  position: relative;
  display: block;
  margin: 0px;
  padding: 0px;
  width: 250px;
  height: 30px;
  z-index: 3;
  margin: 0px auto;
  overflow: visible;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -webkit-box-shadow: rgba(68, 68, 68, 0.1) 0px 0px 3px;
  -moz-box-shadow: rgba(68, 68, 68, 0.1) 0px 0px 3px;
  box-shadow: rgba(68, 68, 68, 0.1) 0px 0px 3px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px #ccc solid;
}
.switch .multi_value{
  position: relative;
  display: block;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 30px;
  z-index: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  background-color: rgba(238, 238, 238, 0);
}
.switch input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  position: relative;
  top: 0px;
  z-index: 2;
  position: relative;
  display: block;
  margin: 0px;
  padding: 0px;
  width: 32%;
  height: 30px;
  line-height : 30px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px #999 solid;
  background-image: -webkit-linear-gradient(-80deg, rgba(255, 255, 255, 0.3) 20%, rgba(238, 238, 238, 0.1) 50%, rgba(143, 143, 143, 0.3) 100%);
  background-image: -moz-linear-gradient(-80deg, rgba(255, 255, 255, 0.3) 20%, rgba(238, 238, 238, 0.1) 50%, rgba(143, 143, 143, 0.3) 100%);
  background-image: -o-linear-gradient(-80deg, rgba(255, 255, 255, 0.3) 20%, rgba(238, 238, 238, 0.1) 50%, rgba(143, 143, 143, 0.3) 100%);
  background-image: linear-gradient(-80deg, rgba(255, 255, 255, 0.3) 20%, rgba(238, 238, 238, 0.1) 50%, rgba(143, 143, 143, 0.3) 100%);
}
.switch .text {
  position: absolute;
  display: block;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 30px;
  top: 0;
  z-index: 3;
  float: left;
  text-align: center;
  pointer-events: none;
}
.switch .text .value {
  font-family: Verdana, Verdana, Geneva, sans-serif;
  font-size : 14px;
  color : #333;
  top : 0;
  position: relative;
  display: inline-block;
  margin: 0px;
  padding: 0px 0px 0px;
  width: 32%;
  height: 30px;
  line-height : 27px;
  top: 1px;
  vertical-align: middle;
  text-align: center;
  text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
}

p{
	margin-top:4%;
	color : #222;
	text-align:center;
	font-family: Comic Sans MS;
	font-size : 20px;
}

.background{
  position: relative;
  display: block;
  margin: 0px;
  padding: 15px 0px 13px;
  border : 1px #bbb solid;
  width: 100%;
  top: 0px;
  height: 34px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(top, #eeeeee, #cccccc);
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFEEEEEE', endColors
  tr='#FFCCCCCC');
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

dabblet.html

<p>Is Lea good-lookin' ?</p>
<div class="background">
	<div class="switch">
		<input class="multi_value" type="range" min="1" max="3" step="1" name="multi_value" value="2" onchange="your_custom_function();">
		<div class="text">
			<div class="value">Yes</div>
			<div class="value">N/A</div>
			<div class="value">Hell yea!</div>
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}