javascript - 带步骤的 jQuery Mobile slider

Question

这是一个JSfiddle :

HTML:

<form>
    <label for="slider-10">Slider:</label>
    <input type="range" name="slider-10" id="slider-10" min="0" max="999" step="1" value="0">
</form>

<form>
    <label for="slider-10">Slider:</label>
    <input type="range" name="slider-10" id="slider-10" min="0" max="99" step="1" value="0">
</form>

我在使用 step 函数时遇到问题。对于底部 slider ，它按预期步进，也就是说步进 1。当我更改顶部 slider 中的最大值时，步进函数开始表现出意外步进 10。

关于为什么会发生这种情况的任何想法或想法？

Answer 1

这种行为似乎就是 JQuery Mobile 在较小屏幕上处理宽间隔的方式。如果我在你的 fiddle 中增加结果 Pane 的宽度，0-999 slider 将不再执行不规则步骤。将 Pane 缩小到非常小的尺寸时会显示相同的行为(对我来说，0-99 slider 在 Pane 变得足够小后开始步进 3)。

不过，我想指出的是，虽然 slider 似乎通过拖动控件以 10 为步进，但您在 HTML 中定义的步进仍然会被强制执行。如果您使用键盘上的箭头键或 slider 旁边的箭头控件，则 slider 会按正确的量移动。如果这里定义的步进真的被打破，那么即使那些输入法也会步进 10。