JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!-- our scrollable element -->
<div id="scrollwrap">
  <div id="scroll">
    jQuery TOOLS 1.2.6  Rangeinput. HTML5 ranges for humans.
  </div>
</div>
 
<!-- rangeinput that controls the scroll -->
<input type="range" max="2600" step="10" />

CSS

/* outermost element for the scroller (stays still) */
#scrollwrap {
    position:relative;
    overflow:hidden;
    width: 100%;
    height:150px;
    border:1px solid #000;
    margin-bottom:15px;
    -moz-box-shadow:0 0 20px #666;
    -webkit-box-shadow:0 0 20px #666;
}

/* the element that moves forward/backward */
#scroll {
    position:relative;
    width:20000em;
    padding:20px 100px;
    font:bold 90px  sans-serif;
    height:150px;
    background-color: #4679BD;
    color:#fff;
    text-shadow:5px 1px 1px #000;
    left:-100px;
}

.slider {
    position:relative;
    cursor:pointer;
    height:1px;
    border:2px solid #00118E;
    width:98%;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
}

.progress {
    background-color:#00118E;
    height:3px;
    position:absolute;
    width:0;
}

.handle {
    border: 4px rgb(161, 233, 240) solid;
    box-shadow: 0px 0px 0px 1px rgb(0, 0, 0),inset 0px 0px 0px 1px rgb(0, 0, 0);
    background-color:#fff;
    height:20px;
    width:80px;
    position:absolute;
    top:-12px;
    display:block;
    cursor:move;
    -moz-border-radius:14px;
    -webkit-border-radius:14px;
}

.handle:active {
    background-color: #4679BD;
}

.range {
    display:none;
}

JavaScript

// get handle to the scrollable DIV
var scroll = $("#scroll");
 
// initialize rangeinput
$(":range").rangeinput({
 
	// slide the DIV along with the range using jQuery's css() method
	onSlide: function(ev, step)  {
		scroll.css({left: -step});
	},
 
	// display progressbar
	progress: true,
 
	// initial value. also sets the DIV's initial scroll position
	value: 100,
 
	// this is called when the slider is clicked. we animate the DIV
	change: function(e, i) {
		scroll.animate({left: -i}, "fast");
	},
 
	// disable drag handle animation when when slider is clicked
	speed: 0
 
});