使html5输入[type = range],中间有许多步骤

Question

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

我正在使用Angular和jQuery库.

Answer 1

有一个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中的任何位置; 它只是定义元素my-detents使用的列表(此处命名)input.

根据MDN和caniuse.com,截至2019年2月,Chrome,IE,Edge和Safari预览版支持使用datalist带range输入.(Firefox支持datalist为text仅输入.)