devxleo/index.html

## index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo</title>

    <style>
        .bar {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            display: inline-block;
            width: 400px;
            height: 20px;
            background-color: azure;
        }

        .slider {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            position: absolute;
            left: 0;
            display: inline-block;
            width: 20px;
            height: 40px;
            background-color: black;
            cursor: move;
        }

        .container {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
</head>
<body>

<div class="container" style="position: relative">
    <span class="bar"></span>
    <span class="slider"></span>
</div>

<script src="jquery-1.11.2.js"></script>
<script>

    var sliderX = 0;
    var hold = false;

    var requestAnimationFrame = window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame;

    var repaint = function () {
        $('.slider').css('left', sliderX + 'px');
        if (hold) {
            requestAnimationFrame(repaint);
        }
    };

    $(document).on('mouseup', function () {
        hold = false;
        $(document).off('mousemove');
    });

    $('.slider').on('mousedown', function (e) {
        hold = true;
        var startX = e.screenX;
        $(document).on('mousemove', function (e) {
            sliderX = sliderX + e.screenX - startX;
            startX = e.screenX;
        });
        requestAnimationFrame(repaint);
    });

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Demo</title>

	<style>
	.bar {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: inline-block;
	width: 400px;
	height: 20px;
	background-color: azure;
	}

	.slider {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: absolute;
	left: 0;
	display: inline-block;
	width: 20px;
	height: 40px;
	background-color: black;
	cursor: move;
	}

	.container {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
	</style>
	</head>
	<body>

	<div class="container" style="position: relative">
	<span class="bar"></span>
	<span class="slider"></span>
	</div>

	<script src="jquery-1.11.2.js"></script>
	<script>

	var sliderX = 0;
	var hold = false;

	var requestAnimationFrame = window.requestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.msRequestAnimationFrame;

	var repaint = function () {
	$('.slider').css('left', sliderX + 'px');
	if (hold) {
	requestAnimationFrame(repaint);
	}
	};

	$(document).on('mouseup', function () {
	hold = false;
	$(document).off('mousemove');
	});

	$('.slider').on('mousedown', function (e) {
	hold = true;
	var startX = e.screenX;
	$(document).on('mousemove', function (e) {
	sliderX = sliderX + e.screenX - startX;
	startX = e.screenX;
	});
	requestAnimationFrame(repaint);
	});

	</script>

	</body>
	</html>