Question

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

我正在使用Angular和jQuery库。

Answer 1

HTML5功能使用list属性和匹配的datalist元素本机提供了棘爪捕捉功能。列表中的每个元素都成为滑块中的制动点，带有刻度标记和捕捉。

＆＃13;

<input type="range" value="0" min="0" max="60000" step="1" list="my-detents">

<datalist id="my-detents">
  <option value="30000">
</datalist>

＆＃13;

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

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

Answer 2

不确定您到目前为止所尝试的内容或您的实际目标是什么。但我的理解是，如果选择了中间三分之一的值，您希望它选择中间值。这是我的例子。

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，如果你想保留所选的值并且只是改变位置但是我没有使用过它可能会有更好的帮助。