Images
We would require two images. A background and the peg
. 
HTML
Since most of this is css and javascript, the html very simple.
CSS
The css is where the magic happens. The webkit prefixes come into play. All we need to define is the style for the input and the peg.
input[type=range] {
-webkit-appearance: none;
width: 75px;
height:26px;
background:url(images/bg.png);
-webkit-box-shadow:rgba(0,0,0,0.6) 0px 0px 5px inset, rgba(255,255,255,0.2) 0px 1px 0px;
-webkit-border-radius:360px;
}
input[type=range][value="1"] {
background-position: 65px 50%, 0px 50%;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background:url(images/peg.png);
background-size:contain;
width: 30px;
height: 30px;
-webkit-box-shadow:#000 0px 0px 3px;
-webkit-border-radius:90px;
}
Javascript
This is where the hard part starts. This code allows us to always get 0 or a 1 and do a neat animation when the peg is in the middle. It also makes sure that the backgorund changes.Thats all really.
$(document).ready(function(e) {
$(".smartRange").change(function(e) {
var currentValue = $(this).val();
var position = 65*currentValue;
$(this).css('background-position', position + 'px' + ', 0px');
});
$(".smartRange").mouseup(function(e) {
var currentValue = $(this).val();
var element = $(this);
if(currentValue > 0.5) {
slideAnimation = setInterval(function() {currentValue=parseFloat(currentValue+0.01);$(element).val(currentValue);
var position = 65*currentValue;
element.css('background-position', position + 'px' + ', 0px');
if(currentValue > 1) {clearInterval(slideAnimation);currentValue = 1;
element.css('background-position', 65 + 'px' + ', 0px');
}
},0);
} else {
slideAnimation = setInterval(function() {currentValue=parseFloat(currentValue-0.01);$(element).val(currentValue);
var position = 65*currentValue;
element.css('background-position', position + 'px' + ', 0px');
if(currentValue < 0) {clearInterval(slideAnimation);currentValue = 0;
element.css('background-position', 0 + 'px' + ', 0px');
}
},0);
}
});
});
Preview Download