Custom Range Input Slider with Labels

This code snippet provides a custom range input slider with corresponding labels. The HTML portion consists of a <div> element with a range input, allowing users to select a value between 1 and 7. The associated labels are represented by an unordered list (<ul>) with list items (<li>) denoting different time intervals.

The CSS code handles the styling of the range input and its components. It defines the dimensions, appearance, and behavior of the slider, including the track, thumb, and labels. The active and selected labels are highlighted with specific colors.

This code is useful for creating interactive interfaces where users can select a value from a range using a visually appealing slider. The labels provide additional context and help users understand the corresponding values associated with each position on the slider.

How to Create a Custom Range Input Slider with Labels

1. First, load the Normalize CSS by adding the following CDN link into the head tag of your webpage.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Create the HTML structure for the range slider as follows:

<div class="range">
  <input type="range" min="1" max="7" steps="1" value="1">
</div>

<ul class="range-labels">
  <li class="active selected">Today</li>
  <li>2 days</li>
  <li>3 days</li>
  <li>4 days</li>
  <li>5 days</li>
  <li>6 days</li>
  <li>7 days</li>
</ul>

3. Style the range slider using the following CSS styles:

.cd__main{
   display: block !important;
}
.range {
  position: relative;
  width: 550px;
  height: 5px;
}

.range input {
  width: 100%;
  position: absolute;
  top: 2px;
  height: 0;
  -webkit-appearance: none;
}
.range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: -8px 0 0;
  border-radius: 50%;
  background: #37adbf;
  cursor: pointer;
  border: 0 !important;
}
.range input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  margin: -8px 0 0;
  border-radius: 50%;
  background: #37adbf;
  cursor: pointer;
  border: 0 !important;
}
.range input::-ms-thumb {
  width: 18px;
  height: 18px;
  margin: -8px 0 0;
  border-radius: 50%;
  background: #37adbf;
  cursor: pointer;
  border: 0 !important;
}
.range input::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #b2b2b2;
}
.range input::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #b2b2b2;
}
.range input::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #b2b2b2;
}
.range input:focus {
  background: none;
  outline: none;
}
.range input::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.range-labels {
  margin: 18px -41px 0;
  padding: 0;
  list-style: none;
}
.range-labels li {
  position: relative;
  float: left;
  width: 90.25px;
  text-align: center;
  color: #b2b2b2;
  font-size: 14px;
  cursor: pointer;
}
.range-labels li::before {
  position: absolute;
  top: -25px;
  right: 0;
  left: 0;
  content: "";
  margin: 0 auto;
  width: 9px;
  height: 9px;
  background: #b2b2b2;
  border-radius: 50%;
}
.range-labels .active {
  color: #37adbf;
}
.range-labels .selected::before {
  background: #37adbf;
}
.range-labels .active.selected::before {
  display: none;
}

4. Finally, add the following JavaScript code to your project. It dynamically updates the style of the range input based on the selected value. It adjusts the background gradient and applies the corresponding styles to the slider components. Additionally, it updates the active and selected labels when the input value changes. Furthermore, clicking on a label changes the input value to the corresponding index, triggering an update of the slider’s appearance.

/* by CodePel 
* www.codepel.com
*/
var sheet = document.createElement('style');
var rangeInput = document.querySelectorAll('.range input');
var prefs = ['webkit-slider-runnable-track', 'moz-range-track', 'ms-track'];

document.body.appendChild(sheet);

var getTrackStyle = function (el) {
  var curVal = el.value;
  var val = (curVal - 1) * 16.666666667;
  var style = '';

  // Set active label
  var rangeLabels = document.querySelectorAll('.range-labels li');
  rangeLabels.forEach(function (label) {
    label.classList.remove('active', 'selected');
  });

  var curLabel = document.querySelector('.range-labels li:nth-child(' + curVal + ')');

  curLabel.classList.add('active', 'selected');
  var prevLabels = Array.from(curLabel.previousElementSibling);
  prevLabels.forEach(function (label) {
    label.classList.add('selected');
  });

  // Change background gradient
  for (var i = 0; i < prefs.length; i++) {
    style += '.range {background: linear-gradient(to right, #37adbf 0%, #37adbf ' + val + '%, #fff ' + val + '%, #fff 100%)}';
    style += '.range input::-'+ prefs[i] + '{background: linear-gradient(to right, #37adbf 0%, #37adbf ' + val + '%, #b2b2b2 ' + val + '%, #b2b2b2 100%)}';
  }

  return style;
};

rangeInput.forEach(function (input) {
  input.addEventListener('input', function () {
    sheet.textContent = getTrackStyle(this);
  });
});

// Change input value on label click
var rangeLabels = document.querySelectorAll('.range-labels li');
rangeLabels.forEach(function (label) {
  label.addEventListener('click', function () {
    var index = Array.from(rangeLabels).indexOf(label);
    rangeInput.forEach(function (input) {
      input.value = index + 1;
      input.dispatchEvent(new Event('input'));
    });
  });
});

That’s all! hopefully, you have successfully created Custom Range Input Slider With Labels. If you have any questions or suggestions, feel free to comment below.