具有特定数字的输入类型范围

Question

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

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

还有我的 JS

  var slider = document.getElementById("myRange");
    var output = document.getElementById("rangeValue");
    $(output).val(slider.value);
    slider.oninput = function() {
        $(output).val(slider.value);
    }

它的工作原理：

但是，我想要发生的并不是所有范围 1-100。但是当你尝试滚动它时，它只会显示特定的数字，而不是 1-100 之间的所有数字。例如。仅限10, 25 ,50 , 65 , 82, 88, 90, 98 , 100

遇到了麻烦。谢谢

Answer 1

嗯，你有两种可能：

1. 您可以在输入中使用step 属性来定义特定的粒度
2. 如果您想要在您的值之间有一个特定的步长，您可以定义一个链接到您的滑块的datalist（例如https://developer.mozilla.org/fr/docs/Web/HTML/Element/datalist）

<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="10">
  <option value="25">
  <option value="50">
  <option value="65">
  <option value="82">
  <option value="88">
  <option value="90">
  <option value="98">
  <option value="100">
</datalist>

Answer 2

您可以将滑块值映射到一个数组，尽管这会稍微破坏 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>

Answer 3

您只需要输入元素上的step 属性：

var slider = document.getElementById("myRange");
  var output = document.getElementById("rangeValue");
  $(output).val(slider.value);
  slider.oninput = function() {
      $(output).val(slider.value);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
  <input type="range" min="0" max="100" step="5" value="50" class="slider" id="myRange" >
  <input type="text" id="rangeValue">
</div>

（参见：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number）

Answer 4

实际上是的，您可以使用step 或list 属性，但是这还不够验证输入的value。

您需要与datalist 和list attribute 一起使用某个验证控件，当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 output = document.getElementById("rangeValue");
$(output).val(slider.value);
let values = Array.from($("#values option")).map(v => +v.value);

slider.oninput = function(e) {
  if (values.some(val => val == slider.value)) {
    $(output).val(slider.value);
  } else {
    slider.value = 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange" list="values">
  <input type="text" id="rangeValue">
  <datalist id="values" style="display:none;">
    <option value="10">
    <option value="20">
    <option value="30">
    <option value="50">
    <option value="65">
    <option value="80">
    <option value="100">
  </datalist>
</div>

Answer 5

你必须为此创建一个自定义函数

var slider = document.getElementById("myRange");
var output = document.getElementById("rangeValue");
var arr = [10, 25, 50, 65, 82, 88, 90, 98, 100];
var ele = document.querySelector('.slider')
ele.setAttribute('step', arr[0]);
var i = 0;

function a() {
  ele.removeAttribute('step')
  var value = ele.value
  for (i = 0; i < arr.length; i++) {
    if (arr[i] > value) {
      ele.value = arr[i]
      break;
    }
  }
  document.querySelector('span').innerHTML = ele.value
}

<div class="slidecontainer">
  <input type="range" min="0" max="100" step="5" value="50" class="slider" id="myRange" onchange="a()">
</div>
<span>0</span>