Animated Range Slider Input with jQuery and CSS3

Animated Range Slider Input with jQuery and CSS3
File Size: 3.67 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.