使 html5 input[type=range] with many steps snap to the middle

Question

我有一个 60000 步的 <input type=range>。当它靠近中间时，我需要插入符号跳到中间。我怎样才能做到这一点？

我正在使用 Angular 和 jQuery 库。

Answer 1

不确定您到目前为止尝试了什么或您的实际目标是什么。但我的理解是，如果范围中间三分之一的值被 selected，你希望它成为中间值。这是我的例子。

HTML:

<input id="slider1" type="range" min="0" max="500" step="20" />

JQuery:

$('#slider1').change( function() {
    var cVal =  $(this).val(); 
    if (cVal >= 200 && cVal <= 300) {
        $('#slider1').val("250");
    }
});

因此，如果一旦更改它等于 200 到 300 之间的任何值，它将默认为 250。这里的问题是它将值设置为 250，而不仅仅是 caretPosition。您可以根据需要更改所有设置。有一个我以前没有用过的插件，叫做 jQuery Caret 如果你想保留 selected 值并只是改变位置，它可能会有更好的帮助，但我又一次没有使用它。

Answer 2

有一个 HTML5 功能，它使用 list 属性和匹配的 datalist 元素提供本机定位捕捉。列表中的每个元素都成为滑块中的定位点，带有刻度线和捕捉。

<input type="range" value="0" min="0" max="60000" step="1" list="my-detents">

<datalist id="my-detents">
  <option value="30000">
</datalist>

datalist元素可以放在HTML中的任何位置；它只是定义供 input 元素使用的列表（此处命名为 my-detents）。

根据 MDN and caniuse.com，截至 2019 年 2 月，Chrome、IE、Edge 和 Safari 预览版支持使用 datalist 和 range 输入. （Firefox 仅支持 datalist 用于 text 输入。）

使 html5 input[type=range] with many steps snap to the middle

Make html5 input[type=range] with many steps snap to the middle

jquery

angularjs

input