仅在单击轨道后显示范围输入的拇指 [视觉模拟刻度]

问题描述

我想修改范围输入以类似于视觉模拟量表。 最重要的方面是，在通过单击轨道在范围上给出第一个输入之前，应隐藏拇指。

有没有办法隐藏拇指并仅在单击曲目时显示它？

解决方法

使用 onclick 事件：

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

然后设置您的范围：

https://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html

,

谢谢！解决方案：

    function activatevas(id){
      document.getElementById(id).classList.remove('notclicked');
    }

    input.notclicked[type=range]::-webkit-slider-thumb {
      visibility: hidden;
    }
    input.notclicked[type=range]::-moz-range-thumb {
      visibility: hidden;
    }
    input.notclicked[type=range]::-ms-thumb {
      visibility: hidden;
    }

<input type="range" min="0" max="100" step="1.0" value="50" name="NA01" id="NA01" class="slider notclicked" onclick="activatevas('NA01')">