Question

当我去拖动html5输入类型=范围元素的滑块时，滑块拇指本身会消失，直到您取消其中一个步骤/值。为什么会发生这种情况，是否有某些方法可以使拇指可以拖动并始终被看到？

不使用jQuery的解决方案是理想的。

到目前为止我所掌握的问题：http://jsfiddle.net/0baryxfv/

部分代码因为我必须将其粘贴到此处以使用jsfiddle ...：

    <div class="range-container">
    <input type="range" name="testerslider" min="0" max="4" step="1" list="testlist">
    <div class="label-container">
        <div class="label">test1sdfs ksjdfs kfhjs skjfhs skdjfshd ksjdhfsk fsdkjf hskfjh jsksjfhs kjshd jdhd.</div>
        <div class="label">test2sd sdf sdfs sdfsdf sfsdf sdfsdf sdfdfdff sdfff</div>
        <div class="label">test3 sfdsf sdfsd sdfsf sdfsdf</div>
        <div class="label">test4 sdfsf sfdsf sdfsdf sdfsdfs sfsfd sfdf</div>
        <div class="label">test5 sdfsf sfsfddf</div>
    </div>
</div>

Answer 1

我刚刚碰到了类似的东西，最终成了一个CSS问题。重置样式表将display: block应用于每个输入，range个元素似乎不喜欢。

对于你的JSFiddle，似乎webkit-flex-basis正在弄乱渲染。在元素呈现后尝试display属性更改，或明确将input[type=range]设置为display: inline-block，看看是否有帮助。

webkit-slider-thumb在拖动时消失

1 个答案: