Animated Range Slider Input with jQuery and CSS3

Makes use of jQuery and CSS3 to create an animated Html5 range slider input with dynamic reel numbers populated by JavaScript.

How to use it:

1. Create an Html5 range slider input in your webpage.

• oninput: triggers while dragging
• onchange: triggers when the user leaves the mousehold
• onmouseup: is a fallback for onchange which might not trigger if the value before and after a drag is same

<input type="range" id="rangeslider" min="0" max="100" value="20" step="1" 
       oninput="updateOutput(value, true)" 
       onchange="deactivate()" 
       onmouseup="deactivate()" 
>

2. Add the reel and static output to the range slider. The whole markup should be like this:

<div id="input-wrapper"> 
  <input type="range" id="rangeslider" min="0" max="100" value="20" step="1" 
         oninput="updateOutput(value, true)" 
         onchange="deactivate()" 
         onmouseup="deactivate()" 
  >
  <div id="reel"> 
    <div id="rn"></div>
  </div>
  <div id="static-output"></div>
</div>

3. The required CSS / CSS3 to style the range slider.

#input-wrapper {
  width: 400px;
  margin: 0 auto;
  position: relative;
  padding-top: 64px;
  padding-bottom: 10px;
  overflow-x: hidden;
}

#rangeslider {
  display: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  height: 5px;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
}

#rangeslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  height: 5px;
  width: 54px;
  position: relative;
}

#rangeslider::-webkit-slider-thumb:after {
  content: '< >';
  word-spacing: 20px;
  text-align: center;
  background: hsl(140, 50%, 70%);
  font: bold 17px/25px Sniglet;
  color: white;
  width: 54px;
  height: 25px;
  position: absolute;
  top: -10px;
  left: 0;
  color: transparent;
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
}

#rangeslider::-webkit-slider-thumb:before {
  content: '';
  height: 5px;
  width: 400px;
  position: absolute;
  top: 0;
  right: 0;
  background: hsl(140, 50%, 70%);
  pointer-events: none;
}

#reel {
  width: 54px;
  height: 54px;
  overflow: hidden;
  position: absolute;
  top: 0; 
  opacity: 0;
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
}

#rn {
  background: -webkit-linear-gradient(hsl(0, 80%, 70%), hsl(120, 80%, 70%));
  background: linear-gradient(hsl(0, 80%, 70%), hsl(120, 80%, 70%));
  -webkit-transition: all 0.25s;
  transition: all 0.25s; 
}

#rn span {
  font: 30px/54px Oswald;
  color: white;
  display: block;
  text-align: center;
}

#static-output {
  font: bold 17px/25px Sniglet;
  color: white;
  position: absolute;
  bottom: 0;
  height: 25px;
  width: 54px;
  text-align: center;
  pointer-events: none;
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
}

.active #reel { opacity: 1; }

.active #static-output { color: transparent; }

.active #rangeslider::-webkit-slider-thumb:after {
  color: white;
}

4. Import the latest version of jQuery library at the end of the document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 

5. The core JavaScript to enable the range slider input and update the reel numbers as the visitor moves the slider thumb.

var min = $("#rangeslider").attr("min");
var max = $("#rangeslider").attr("max");

var rn = "";
for(var i = min; i <= max; i++)
  rn += "<span>"+i+"</span>";
$("#rn").html(rn);

updateOutput($("#rangeslider").val(), false);

var rfigure, h, v;
function updateOutput(figure, activate) {
  if(activate)
    $("#input-wrapper").addClass("active");
  
  rfigure = Math.round(figure);
  $("#static-output").html(rfigure);
  
  h = figure/max*($("#input-wrapper").width()-$("#reel").width()) + 'px';
  v = rfigure*$("#reel").height()*-1 + 'px';
  
  $("#static-output, #reel").css({left: h});
  $("#rn").css({transform: 'translateY('+v+') translateZ(0)'});
}

function deactivate() {
  $("#input-wrapper").removeClass("active");
}

---

This awesome jQuery plugin is developed by xmaster. For more Advanced Usages, please check the demo page or visit the official website.