javascript - 在没有jQuery的情况下将输入值公开给工具提示

我想要这种布局。

我不知道该怎么做才能在此布局中查看气泡上的输入值。

气泡希望仅在其悬停时才可见。

代码如下。

<div class="control__wrapper">
    <input type="range" min="1" max="4" steps="1" value="4" class="range">
    //<span class="thum"></span>
</div>

.control__wrapper{
    width:100px;
    position:relative;
}
.range{
    width:100px;
    -webkit-appearance: none;
    -ms-vertical-align:-10px;
}
.range:focus{
    outline:none;
}

.range::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: #ddd;
}
.range::-webkit-slider-thumb {
    border: 1px solid black;
    height: 15px;
    width: 10px;
    background: #eee;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -6px;
}
.range:focus::-webkit-slider-runnable-track {
    background: #ddd;
}

最佳答案

尝试这个

<span id="valBox"></span>
<input type="range" min="5" max="10" step="1" oninput="showVal(this.value)" onchange="showVal(this.value)"

为了与浏览器兼容，我们需要两个事件

关于javascript - 在没有jQuery的情况下将输入值公开给工具提示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59780788/