lewang/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Range Slider Test</title>
	<link rel="stylesheet" type="text/css" href="rangetest.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<div class="range-container">
		<div class="slider-container">
			<div class="range-fill"></div>
			<input class="slider" type="range" name="testerslider" min="0" max="5" step="0.01" list="testlist">
		</div>

		<div class="label-container">
			<div class="label">Label One</div>
			<div class="label">Label Two</div>
			<div class="label">Label Three</div>
			<div class="label">Label Four</div>
			<div class="label">Label Five</div>
			<div class="label">Label Six</div>
		</div>
	</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="range.js"></script>
</body>
</html>

## range.js
$(document).ready(function(){

	var $slider = $('input[type=range]');
    var max = parseInt($slider.attr('max'));
    var lastChangeHandled;

    function convertTouchXToFraction(touchX) {
        //Figure out where it will be on the slider
        var sliderOffset = $slider.offset();
        var normalizedX = touchX - sliderOffset.left;
        return normalizedX / $slider.width();
    }

    function changeHandler(event) {
        var value = $slider.val();
        if (lastChangeHandled !== value) {
            lastChangeHandled = value;
            console.log(value);
            var frac = value / max;
            var rangeWidth = (frac * 100) + "%";
            $('.range-fill').css({"width": rangeWidth, "min-width": "3%", "max-width": "98%"});
            $slider.hide().show(0);
        }
    }
    var lastSnap;

    function setLastSnap() {
        lastSnap = (new Date()).getTime();
    };
    setLastSnap();

    var touchRegexp = /^touch/;

    function syncValToXCreator(snap) {
        return function(event) {
            var epoch = (new Date()).getTime();
            var timeDiff = epoch - lastSnap;
            // We don't handle any move events for THIS NUMBER of milliseconds after a snap.
            // This is required because on iPad you get:
            //  touchEnd -> 300ms delay -> mouseMove
            var throttleMs = 400;
            if (timeDiff > throttleMs &&
                  (event.which === 1 || touchRegexp.test(event.type))) {

                var touchX = event.originalEvent.clientX || event.originalEvent.changedTouches[0].clientX;
                var frac = convertTouchXToFraction(touchX);
                var inputValue;

                inputValue = frac * max
                if (snap) {
                    inputValue = Math.round(inputValue);
                    setLastSnap();
                    $slider.trigger("shp.snap", [inputValue]);
                }

                $slider.val(inputValue);
                // jQuery does not trigger change for non-user interactions.
                changeHandler(event);
            }
        }
    }
    $slider.on("shp.snap", function(event, value){
        $(".label").css("color", "grey");
        $(".label:nth-child(" + (value + 1) + ")").css("color", "#f36f21");
    });

    // Snap to closest value
	$slider.on("touchend mouseup click", syncValToXCreator("snap"));
    $(".label").on("touchend mouseup click", syncValToXCreator("snap"));

    // Modify range-fill as ball move.
	$slider.on("touchmove mousemove click", syncValToXCreator());
    $(".label").on("touchend mouseup click", syncValToXCreator("snap"));
});

## rangetest.css
/*currently only prefixed for webkit*/
body {
	display: -webkit-flex;
	-webkit-justify-content: center;
	font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
	font-weight: 300;
}
.range-container {
	width: 90%;
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	margin-top: 2rem;
}

.label-container {
	-webkit-flex-basis: 100%;
	display: -webkit-flex;
	-webkit-flex-wrap: nowrap;
	-webkit-justify-content: space-between;
	margin-top: 2rem;
}

.label {
	color: grey;
	font-size: 1rem;
	margin-top: 1rem;
	text-align: center;
	max-width: 3rem;
	-webkit-tap-highlight-color: transparent;  /*gets rid of black flash on click of track*/
}
.slider-container {
	position: relative;
	height: 100%;
	width: 100%;
}
.slider {
	position: absolute;
	left:0;
	width: 100%;
}

.range-fill {
	position:absolute;
	top:4px;
	left:4px;
	background-color: #fbcdb2;
	height: 12px;
	pointer-events: none;
	border-radius: 10px;
}

input[type=range] {
	-webkit-appearance: none;
	-webkit-flex-basis: 100%;
	-webkit-tap-highlight-color: transparent;
	background: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 10rem;
    height: 1rem;
    background: transparent;
    border: 2px solid #f36f21;
    border-radius: 10px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    background: #f36f21;
    margin-top: -1.8rem;
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0px 5px 5px -3px #d9d9d9;
}

input[type=range]:focus {
    outline: none;
}

/*MEDIA QUERIES*/

@media (min-width:992px){
	.range-container {
		width: 70%;
		max-width: 60rem;
		display: -webkit-flex;
		-webkit-flex-wrap: wrap;
		margin-top: 5rem;
	}
	.label-container {
		margin-top: 2rem;
	}
	.label {
		font-size: 2rem;
		max-width: 8rem;
	}
	.slider-container {
		height: 2.5rem;
	}
	.range-fill {
		border-radius: 20px;
		height: 36px;
	}
	input[type=range]::-webkit-slider-thumb {
		width: 6rem;
		height: 6rem;
	}
	input[type=range]::-webkit-slider-runnable-track {
		width: 10rem;
		height: 2.5rem;
		border-radius: 20px;
	}
}

@media(min-width:1200px){
	.range-container {
		width: 80%;
	}
	.label {
		max-width: 10rem;
	}
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Range Slider Test</title>
	<link rel="stylesheet" type="text/css" href="rangetest.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
	<div class="range-container">
	<div class="slider-container">
	<div class="range-fill"></div>
	<input class="slider" type="range" name="testerslider" min="0" max="5" step="0.01" list="testlist">
	</div>

	<div class="label-container">
	<div class="label">Label One</div>
	<div class="label">Label Two</div>
	<div class="label">Label Three</div>
	<div class="label">Label Four</div>
	<div class="label">Label Five</div>
	<div class="label">Label Six</div>
	</div>
	</div>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="range.js"></script>
	</body>
	</html>
	$(document).ready(function(){

	var $slider = $('input[type=range]');
	var max = parseInt($slider.attr('max'));
	var lastChangeHandled;

	function convertTouchXToFraction(touchX) {
	//Figure out where it will be on the slider
	var sliderOffset = $slider.offset();
	var normalizedX = touchX - sliderOffset.left;
	return normalizedX / $slider.width();
	}

	function changeHandler(event) {
	var value = $slider.val();
	if (lastChangeHandled !== value) {
	lastChangeHandled = value;
	console.log(value);
	var frac = value / max;
	var rangeWidth = (frac * 100) + "%";
	$('.range-fill').css({"width": rangeWidth, "min-width": "3%", "max-width": "98%"});
	$slider.hide().show(0);
	}
	}
	var lastSnap;

	function setLastSnap() {
	lastSnap = (new Date()).getTime();
	};
	setLastSnap();

	var touchRegexp = /^touch/;

	function syncValToXCreator(snap) {
	return function(event) {
	var epoch = (new Date()).getTime();
	var timeDiff = epoch - lastSnap;
	// We don't handle any move events for THIS NUMBER of milliseconds after a snap.
	// This is required because on iPad you get:
	// touchEnd -> 300ms delay -> mouseMove
	var throttleMs = 400;
	if (timeDiff > throttleMs &&
	(event.which === 1 \|\| touchRegexp.test(event.type))) {

	var touchX = event.originalEvent.clientX \|\| event.originalEvent.changedTouches[0].clientX;
	var frac = convertTouchXToFraction(touchX);
	var inputValue;

	inputValue = frac * max
	if (snap) {
	inputValue = Math.round(inputValue);
	setLastSnap();
	$slider.trigger("shp.snap", [inputValue]);
	}

	$slider.val(inputValue);
	// jQuery does not trigger change for non-user interactions.
	changeHandler(event);
	}
	}
	}
	$slider.on("shp.snap", function(event, value){
	$(".label").css("color", "grey");
	$(".label:nth-child(" + (value + 1) + ")").css("color", "#f36f21");
	});

	// Snap to closest value
	$slider.on("touchend mouseup click", syncValToXCreator("snap"));
	$(".label").on("touchend mouseup click", syncValToXCreator("snap"));

	// Modify range-fill as ball move.
	$slider.on("touchmove mousemove click", syncValToXCreator());
	$(".label").on("touchend mouseup click", syncValToXCreator("snap"));
	});
	/currently only prefixed for webkit/
	body {
	display: -webkit-flex;
	-webkit-justify-content: center;
	font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
	font-weight: 300;
	}
	.range-container {
	width: 90%;
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	margin-top: 2rem;
	}

	.label-container {
	-webkit-flex-basis: 100%;
	display: -webkit-flex;
	-webkit-flex-wrap: nowrap;
	-webkit-justify-content: space-between;
	margin-top: 2rem;
	}

	.label {
	color: grey;
	font-size: 1rem;
	margin-top: 1rem;
	text-align: center;
	max-width: 3rem;
	-webkit-tap-highlight-color: transparent; /gets rid of black flash on click of track/
	}
	.slider-container {
	position: relative;
	height: 100%;
	width: 100%;
	}
	.slider {
	position: absolute;
	left:0;
	width: 100%;
	}

	.range-fill {
	position:absolute;
	top:4px;
	left:4px;
	background-color: #fbcdb2;
	height: 12px;
	pointer-events: none;
	border-radius: 10px;
	}

	input[type=range] {
	-webkit-appearance: none;
	-webkit-flex-basis: 100%;
	-webkit-tap-highlight-color: transparent;
	background: transparent;
	}

	input[type=range]::-webkit-slider-runnable-track {
	width: 10rem;
	height: 1rem;
	background: transparent;
	border: 2px solid #f36f21;
	border-radius: 10px;
	}

	input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 4rem;
	width: 4rem;
	border-radius: 50%;
	background: #f36f21;
	margin-top: -1.8rem;
	border: 2px solid #fff;
	cursor: pointer;
	box-shadow: 0px 5px 5px -3px #d9d9d9;
	}

	input[type=range]:focus {
	outline: none;
	}

	/MEDIA QUERIES/

	@media (min-width:992px){
	.range-container {
	width: 70%;
	max-width: 60rem;
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	margin-top: 5rem;
	}
	.label-container {
	margin-top: 2rem;
	}
	.label {
	font-size: 2rem;
	max-width: 8rem;
	}
	.slider-container {
	height: 2.5rem;
	}
	.range-fill {
	border-radius: 20px;
	height: 36px;
	}
	input[type=range]::-webkit-slider-thumb {
	width: 6rem;
	height: 6rem;
	}
	input[type=range]::-webkit-slider-runnable-track {
	width: 10rem;
	height: 2.5rem;
	border-radius: 20px;
	}
	}

	@media(min-width:1200px){
	.range-container {
	width: 80%;
	}
	.label {
	max-width: 10rem;
	}
	}