How to assign labels on a range slider

Question

<div class="range-wrap">
  <input id="range" type="range" name="range" min="3" max="20" value="10" step="1">
  <label id="rangevalue">10</label>
</div>

I to need to create range slider, where the values below 7 are labelled modest, 7 to 15 as moderate and anything above labelled as extensive. How I do add these labels to my range slide?

Answer 1

The idea will to be just simply get the value of existing slider and based on the value, do an if statement.

And to get the value when someone moves the slider, you can use oninput.

Try this:

First Answer Without The Partition

var slider = document.getElementById("range");
var display = document.getElementById("display");
var getVal = slider.value;

numVal.innerHTML = getVal; // If you don't want the number to be displayed, delete this. This is to show at which number the label will change

if(getVal<7) {
  display.innerHTML = "Modest";
}

if(getVal>=7 && getVal<=15) {
  display.innerHTML = "Moderate";
}

if(getVal>15){
  display.innerHTML = "Extensive";
}

slider.oninput = function() {
  numVal.innerHTML = this.value;// If you don't want the number to be displayed, delete this. This is to show at which number the label will change
  
  var getVal = this.value;
  if(getVal<7) {
    display.innerHTML = "Modest";
  }
  
  if(getVal>=7 && getVal<=15) {
    display.innerHTML = "Moderate";
  }
  
  if(getVal>15){
    display.innerHTML = "Extensive";
  }
}

<div class="range-wrap"> 
  <input id="range" type="range" name="range" min="3" max="20" value="10" step="1">
  <label id="display"></label>
  <p id="numVal"></p> <!-- If you don't want the number to be displayed, delete this. This is to show at which number the label will change -->
</div>

ps: I've added comments in the code to hide the number if you don't want it. The numbers are there so you can see the change is happening at the right number. Delete the commented code accordingly to hide number values from displaying.

Updated Answer: (with partition)

You can use child elements to create a bar and push it on top of the slider using absolute and relative position. Its just a simple CSS trick.

The idea is to set a width for your range. Then, create 2 divs that looks like bars using border-right and then absolutely position it to your parent (which would be the range input)

Try this:

var slider = document.getElementById("range");
var display = document.getElementById("display");
var getVal = slider.value;

numVal.innerHTML = getVal; // If you don't want the number to be displayed, delete this. This is to show at which number the label will change

if(getVal<7) {
  display.innerHTML = "Modest";
}

if(getVal>=7 && getVal<=15) {
  display.innerHTML = "Moderate";
}

if(getVal>15){
  display.innerHTML = "Extensive";
}

slider.oninput = function() {
  numVal.innerHTML = this.value;// If you don't want the number to be displayed, delete this. This is to show at which number the label will change
  
  var getVal = this.value;
  if(getVal<7) {
    display.innerHTML = "Modest";
  }
  
  if(getVal>=7 && getVal<=15) {
    display.innerHTML = "Moderate";
  }
  
  if(getVal>15){
    display.innerHTML = "Extensive";
  }
}

#range-wrap {
  position: relative;
}

input[type=range] {
  width: 200px;
}

#range-bars {
  width: 1px;
  height: 10px;
  border-right: 2px solid black;
  position: absolute;
  top: 13px;
  left: 47px;
}

#range-bars-two {
  width: 1px;
  height: 10px;
  border-right: 2px solid black;
  position: absolute;
  top: 13px;
  left: 157px;
}

<div class="range-wrap"> 
  <input id="range" type="range" name="range" min="3" max="20" value="10" step="1">
  <label id="display"></label>
  <p id="numVal"></p> <!-- If you don't want the number to be displayed, delete this. This is to show at which number the label will change -->
  <div id="range-bars"></div>
  <div id="range-bars-two"></div>
</div>

ps: there was a slight error in the if statement and I have made the changes to this answer plus the snippet 1 answer.