How to Create Range Slider With HTML5 and JavaScript

Before the introduction of HTML5, we couldn’t even think about creating a range slider on a webpage.

HTML5 introduced new attributes and features, including the range input type that now makes developers life more comfortable. The range input element allows you to create sliding controls for your site users.

Creating a sliding range element takes a bunch of Javascript code, but we can achieve the same result with the range type input element.

In this tutorial, we will show you how with a little JavaScript, we can capture and respond to user interaction with the range slider control.

Here is a jQuery solution to display values for all range input elements.

1. Create HTML.

Specify the key attributes:

  • min defines the lowest accepted value in the range.
  • max defines the highest accepted value in the range.
  • value defines the starting or default value of the slider.
<body>
  <p>
    <label for="range_weight">Weight: </label>
    <input type="range" name="weight"  class="slider" min="0" max="100" value="60">
    <span  class="slider_label"></span>
  </p>
  <p>
    <label for="range_weight">Height: </label> 
    <input type="range" name="height" class="slider" min="0" max="100" value="8">
    <span  class="slider_label"></span>
  </p>
  <p>
    <label for="range_weight">Length: </label>
    <input type="range" name="length" class="slider" min="0" max="100" value="30">
    <span  class="slider_label"></span>
  </p>
</body>

2. Add Javascript

A jQuery snippet that provides the change event for all range input elements.

<script>
  $(function()
  
  $('.slider').on('input change', function(){
            $(this).next($('.slider_label')).html(this.value);
          });
        $('.slider_label').each(function(){
            var value = $(this).prev().attr('value');
            $(this).html(value);
          });  
  })
</script>

Use the following code integration:

<script src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. It allows browsers to ensure that resources hosted on third-party servers have not been tampered with.

Let’s bring our code parts together and see the final result!

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body{
      font-family:sans-serif;
      
    </style>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>
  </head>
  <body>
    <h2>Range Slider</h2>
    <p>
      <label for="range_weight">Weight: </label>
      <input type="range" name="weight"  class="slider" min="0" max="100" value="60">
      <span  class="slider_label"></span>
    </p>
    <p>
      <label for="range_weight">Height: </label> 
      <input type="range" name="height" class="slider" min="0" max="100" value="8">
      <span  class="slider_label"></span>
    </p>
    <p>
      <label for="range_weight">Length: </label>
      <input type="range" name="length" class="slider" min="0" max="100" value="30">
      <span  class="slider_label"></span>
    </p>
    <script>
      $(function() {
      $('.slider').on('input change', function(){
           $(this).next($('.slider_label')).html(this.value);
         });
       $('.slider_label').each(function(){
           var value = $(this).prev().attr('value');
           $(this).html(value);
         });  
      
      
      })
    </script>
  </body>
</html>

Let’s see another example with negative and decimal values:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body{
      font-family:sans-serif;
      
    </style>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>
  </head>
  <body>
    <h2>Range Slider</h2>
    <p>
      <label for="range_weight">Negative: </label>
      <input type="range" name="negative"  class="slider" min="-25" max="25" value="-10">
      <span  class="slider_label"></span>
    </p>
    <p>
      <label for="range_weight">Decimal: </label> 
      <input type="range" name="decimal" class="slider" min="0.001" max="2" value="0.08" step="0.001">
      <span  class="slider_label"></span>
    </p>
    <script>
      $(function(){
      $('.slider').on('input change', function(){
                $(this).next($('.slider_label')).html(this.value);
              });
            $('.slider_label').each(function(){
                var value = $(this).prev().attr('value');
                $(this).html(value);
              });  
      })
    </script>
  </body>
</html>

Do you find this helpful?

Related articles