rangeslider.js floating point boundaries

In this example below you will see how to do a rangeslider.js floating point boundaries with some HTML / CSS and Javascript

HTML5 input range slider element polyfill http://andreruffert.github.io/rangeslider.js/

Thumbnail
This awesome code was written by andreruffert, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright andreruffert ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>rangeslider.js floating point boundaries</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--
  rangeslider.js example
  
  https://github.com/andreruffert/rangeslider.js
  by André Ruffert - @andreruffert
-->

<h2>Floating point boundaries</h2>
<br>
<br>
<input type="range" value="0.5" step="0.1" min="0.1" max="3.0">
<br>
<output>0.5</output>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/andreruffert/rangesliderjs-floating-point-boundaries-jEOOYN */
body {
  color: #404040;
  padding: 50px;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

h2 {
  font-weight: 300;
}

output {
  display: block;
}


/*Downloaded from https://www.codeseek.co/andreruffert/rangesliderjs-floating-point-boundaries-jEOOYN */
$(function() {
  var output = document.querySelectorAll('output')[0];
  
  $(document).on('input', 'input[type="range"]', function(e) {
        output.innerHTML = e.currentTarget.value;
  });
  
  $('input[type=range]').rangeslider({
    polyfill: false
  });
});

Comments