Javascript 使用特定数字输入类型范围

我有一个输入类型范围，最小值为0，最大值为100

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange" >
  <input type="text" id="rangeValue">
</div>

而且它正在工作：

但是，我希望发生的事情并不都在1-100之间。但当你尝试滚动它时，它只会显示特定的数字，而不是1-100之间的所有数字。比如说<仅代码>10、25、50、65、82、88、90、98、100

---

有麻烦了。谢谢

您只需要输入元素上的

步骤

属性即可：

var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“rangeValue”）；
$（输出）.val（滑块.value）；
slider.oninput=函数（）{
$（输出）.val（滑块.value）；
}

---

嗯，您有两种可能：

您可以在输入上使用

步骤

属性来定义特定的粒度

如果您希望在值之间有一个特定的步骤，可以定义链接到滑块的

数据列表

（例如）

---

您可以将滑块值映射到一个数组，尽管它稍微破坏了UI的直观性

<div class="slidecontainer">
  <input type="range" min="0" max="8" value="4" class="slider" id="myRange" >
  <input type="text" id="rangeValue">
</div>    
<script>
  var slider = document.getElementById("myRange");
    var output = document.getElementById("rangeValue");
    var vals =[10, 25 ,50 , 65 , 82, 88, 90, 98 , 100];
    $(output).val(vals[slider.value]);
    slider.oninput = function() {
        $(output).val(vals[slider.value]);
    }
</script>

var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“rangeValue”）；
var VAL=[10,25,50,65,82,88,90,98100]；
$（output.val（vals[slider.value]）；
slider.oninput=函数（）{
$（output.val（vals[slider.value]）；
}

实际上是的，您可以使用

步骤

或属性，但是这不足以验证输入的

值

您需要将某个验证控件与
数据列表
和一起使用，当
值超出范围时，只需重置它

let values = Array.from($("#values option")).map(v => +v.value);

slider.oninput = function(e) {
  //Check wether the inputted value is in the range of values
  if (values.some(val => val == slider.value)) {
    $(output).val(slider.value);
  } else {
    slider.value = 0;
  }
}

演示：


var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“rangeValue”）；
$（输出）.val（滑块.value）；
让values=Array.from（$（“#values选项”））.map（v=>+v.value）；
slider.oninput=函数（e）{
if（values.some（val=>val==slider.value））{
$（输出）.val（滑块.value）；
}否则{
slider.value=0；
}
}
您必须为此创建自定义函数


var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“rangeValue”）；
var-arr=[10,25,50,65,82,88,90,98100]；
var ele=document.querySelector（“.slider”）
ele.setAttribute（'step'，arr[0]）；
var i=0；
函数a（）{
ele.removeAttribute（'步骤'）
var值=元素值
对于（i=0；i值）{
ele.value=arr[i]
打破
}
}
document.querySelector（'span'）。innerHTML=ele.value
}

0
您想要的数字是否有任何模式，或者正好是10、25、50、65、82、88、90、98或100？您可以设置“步长”属性，但这将使其按指定的数量上下移动（因此
step=“5”
将为您提供0、5、10、15等）@lucas的可能重复项是的，这是我想要的精确数字，不是奇数，不是偶数，也不是5次跳过，而是精确的10、25、50、65、82、88、90、98或100。对不起，我不确定这是否可能是偶数。它的可能重复项是按5跳过，但我只想要特定的数字，不是奇数，不是偶数，也不是按5跳过，我想要的正是这个
10,25,50,65,82,88,90,98,100
，并且这个数字没有模式，也不是只按5跳过。这可能吗？这确实有效，我会接受这个答案，但在那之前，你能告诉我为什么你设置max=
8
而不是
100
？因为数组中有9个数字，所以0=10，1=25，2=50到8=100好的，我现在明白了，这是有效的，而且更简单。谢谢没问题。如果您的数组可能会更改，您可以通过根据数组的长度设置max属性来适应它：
slider.setAttribute（“max”，vals.length-1）let values = Array.from($("#values option")).map(v => +v.value);

slider.oninput = function(e) {
  //Check wether the inputted value is in the range of values
  if (values.some(val => val == slider.value)) {
    $(output).val(slider.value);
  } else {
    slider.value = 0;
  }
}