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

好吧，您有两种可能：

您可以在输入中使用step属性来定义特定的粒度
如果要在两个值之间指定特定的步骤，可以定义链接到滑块的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

您所需要做的就是在输入元素上使用df = pd.merge(df1, df2, left_index=True, right_index=True, how='right', sort=False, suffixes=('','_')) print (df) col1 col2 col1_ col2_ 0 A 3.0 A 3 1 B 4.0 B 4 2 NaN NaN C 6 3 NaN NaN D 7 4 NaN NaN E 8 df = df.loc[:, ~df.columns.str.endswith('_')] print (df) col1 col2 0 A 3.0 1 B 4.0 2 NaN NaN 3 NaN NaN 4 NaN NaN属性：

step

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

（请参阅：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>

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

5 个答案: