Javascript 滑块下相同位置的值

我制作了一个滑块，可以在滑动时更改值和笑脸图像

在此图像中，值始终显示在左下角，如下所示：

我想要实现的是这样的目标： 因此，当您将笑脸向左滑动时，值也随之滑动

我的javascript：

var slider = document.getElementById("feedback-slider");
var cijfer = document.getElementById("feedback-cijfer");
cijfer.innerHTML = "Uw gekozen cijfer: " + slider.value;


slider.oninput = function() {

 if (slider.value <= 6) {
 slider.classList.add('orange');slider.classList.remove('red');
 } if (slider.value <= 3) {
 slider.classList.add('red');slider.classList.remove('orange');
 } if (slider.value >= 7) {
 slider.classList.remove('red');slider.classList.remove('orange');
 }

 cijfer.innerHTML = "Uw gekozen cijfer: " + this.value;
 }

---

是否有人知道如何使用id反馈来定位元素，以便随滑块变化？

因此，基本上当滑块移动时，值也应该移动？将文本设置为图标的绝对位置，并使用css transitionX:-50%。沿着这条路线走的东西可以做到。是的@DILEEPTHOMAS@Sybrentjuh检查答案检查这个

<div class="feedback-container">
 <input type="range" value="10" min="0" max="10" class="feedback-slider" id="feedback-slider">
</div>
<p style="padding-top: 20px;" id="feedback-cijfer"></p>