html 在输入范围内插入跟踪器

o8x7eapl 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(116)

我如何在输入范围内插入一个跟踪器？下面是我的代码=〉

const marker = document.createElement('div');
marker.classList.add('range-marker');

const range = document.getElementById('range');
range.appendChild(marker);

range.addEventListener('input', () => {
    const percent = (range.value - range.min) / (range.max - range.min);
    const pixels = percent * range.offsetWidth;
    marker.style.left = `${pixels}px`;
});

.range-marker {
    position: absolute;
    top: -5px;
    width: 100px;
    height: 10px;
    border-radius: 50%;
    background-color: red;
    z-index: 100;
}

<input type="range" id="range">

我不知道怎么弄的，但是不能用。没有错误...你能帮我修一下吗？
谢谢你。

Html

来源：https://stackoverflow.com/questions/74820753/inserting-tracker-inside-input-range

1条答案

按热度按时间

o2rvlv0m1#

你基本上需要把输入和范围标记放在一个 Package 器中，并使用范围标记上的绝对位置来定位红色跟踪器。这可以像下面这样实现。请注意，附加的div将进入 Package 器，而不是输入。

const marker = document.createElement('div');
marker.classList.add('range-marker');
const range = document.getElementById('container');
range.appendChild(marker);
range.addEventListener('input', () => {
    const percent = (range.value - range.min) / (range.max - range.min);
    const pixels = percent * range.offsetWidth;
    marker.style.left = `${pixels}px`;
});

.range-marker {
    position: absolute;
    top: 2px;
    left:60%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    z-index: 100;
}
#container{
  position:relative;
  display:inline-block
}

<div id="container">
<input type="range" id="range">
</div>

赞(0）回复(0）举报 2022-12-16

我来回答

html 在输入范围内插入跟踪器

1条答案

相关问题

热门标签

最新问答