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>

我需要创建范围滑块，其中低于7的值标记为适中，将7到15的值标记为中，将高于任何值的标记为广泛。如何将这些标签添加到我的范围幻灯片？

Answer 1

这个想法将只是简单地获取现有滑块的值，然后根据该值执行 if语句。

要获取有人移动滑块时的值，可以使用oninput。

尝试一下：

没有分区的第一个答案

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：我在代码中添加了注释，以在不需要时隐藏该数字。那里有数字，所以您可以看到更改在正确的数字上进行。相应地删除注释的代码以隐藏显示的数字值。

更新后的答案：（带有分区）

您可以使用子元素创建条形图，并使用 absolute 和 relative 位置将其推到滑块顶部。这只是一个简单的CSS技巧。

想法是为您的范围设置宽度。然后，使用 border-right 创建2个看起来像条形的div，然后将其绝对定位到父级（这将是范围输入）

尝试一下：

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： if语句中有一个小错误，我已经对此答案以及代码段1答案进行了更改。

如何在范围滑块上分配标签

1 个答案: