Range Slider with Min and Max Values JavaScript

This JavaScript code snippet provides the functionality of a range slider with minimum and maximum values. It allows users to select a value within a specified range by sliding a draggable handle along a track. It comes with three examples of range sliders: one with default behavior, one with predefined minimum and maximum values, and one with defined steps.

The JavaScript code handles the functionality of the range sliders, updating the displayed value as the user interacts with the slider. By using this code, developers can easily implement range sliders with customizable minimum and maximum values to suit their specific needs.

How to Create Range Slider with Min and Max Values in JavaScript

1. In the following HTML, we have created three range sliders with different configurations. Each slider consists of an input element of type “range” and a span element to display the selected value. Copy the desired one and paste it into your project.

<h2> Range Slider with Default Behaviour </h2>
<div class="range-slider">
  <input class="range-slider__range" type="range" value="0" min="0" max="100">
  <span class="range-slider__value">0</span>
</div>

<h2> Range Slider with Min & Max Values </h2>

<div class="range-slider">
  <input class="range-slider__range" type="range" value="400" min="150" max="500">
  <span class="range-slider__value">0</span>
</div>

<h2> Range Slider with Steps </h2>
<div class="range-slider">
  <input class="range-slider__range" type="range" value="250" min="0" max="500" step="50">
  <span class="range-slider__value">0</span>
</div>

2. Use the following CSS code to style the range slider.

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  padding: 60px 20px;
}
@media (min-width: 600px) {
  body {
    padding: 60px;
  }
}

.range-slider {
  margin: 60px 0 0 0;
}

.range-slider {
  width: 100%;
  box-sizing: border-box;
}

.range-slider__range {
  -webkit-appearance: none;
  width: calc(100% - (73px));
  height: 10px;
  border-radius: 5px;
  background: #d7dcdf;
  outline: none;
  padding: 0;
  margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  -webkit-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
  background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
  background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  -moz-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
  background: #1abc9c;
}
.range-slider__range:active::-moz-range-thumb {
  background: #1abc9c;
}
.range-slider__range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}

.range-slider__value {
  display: inline-block;
  position: relative;
  width: 60px;
  color: #fff;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
  background: #2c3e50;
  padding: 5px 10px;
  margin-left: 8px;
}
.range-slider__value:after {
  position: absolute;
  top: 8px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-right: 7px solid #2c3e50;
  border-bottom: 7px solid transparent;
  content: "";
}

::-moz-range-track {
  background: #d7dcdf;
  border: 0;
}

input::-moz-focus-inner,
input::-moz-focus-outer {
  border: 0;
}

Finally, add the following JavaScript function to display real-time updating slide values.

/* by CodePel 
* www.codepel.com
*/
var rangeSlider = function() {
  var sliders = document.querySelectorAll('.range-slider');
  
  sliders.forEach(function(slider) {
    var range = slider.querySelector('.range-slider__range');
    var value = slider.querySelector('.range-slider__value');

    var values = slider.querySelectorAll('.range-slider__value');
    values.forEach(function(val) {
      var valValue = val.previousElementSibling.getAttribute('value');
      val.innerHTML = valValue;
    });

    range.addEventListener('input', function() {
      value.innerHTML = this.value;
    });
  });
};

rangeSlider();

That’s all! hopefully, you have successfully created a range slider with min and max values in JavaScript. If you have any questions or suggestions, feel free to comment below.