在拇指頂部顯示滑塊範圍值

Question

我有這個範圍滑塊，基於W3Schools提供的範圍滑塊。一切工作正常，除了我希望它的價值顯示在拇指上方，所以當你滑動它時，它會隨之滑動。 我已經嘗試了JS的東西，但它不工作： 這裏是我的代碼：

HTML

<div class="simulador"> 
    <div class="contenedor"> 
     <h1 class="simula">Simular</h1> 
     <div class="slider-container"> 
      <div class="interno"> 
       <div class="slidecontainer"> 
        <input type="range" min="5000" max="100000" value="50000" class="slider" id="rango" oninput="outputUpdate(val)"> 
        <output for="rango" id="valor"></output> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS（我用無禮的話，但這裏的渲染）

.simulador .contenedor { 
    padding: 25px 22px; 
} 
.simulador .contenedor .slider-container { 
    padding: 35px 0px; 
} 
.simulador .contenedor .slider-container .interno { 
    padding: 20px 0px; 
} 
.simulador .contenedor .slider-container .interno .slidecontainer { 
    width: 100%; 
    padding-top: 18px; 
} 
.simulador .contenedor .slider-container .interno .slidecontainer output { 
    font-family: 'museo700'; 
    margin-bottom: 0px; 
    position: absolute; 
    padding: .5em; 
    background: transparent; 
    color: yellow; 
} 
.simulador .contenedor .slider-container .interno .slider { 
    -webkit-appearance: none; 
    width: 100%; 
    height: 5px; 
    border-radius: 2.5px; 
    background: #003664; 
    outline: none; 
    -webkit-transition: .2s; 
    transition: opacity .2s; 
    border: 0; 
} 
.simulador .contenedor .slider-container .interno .slider:hover { 
    opacity: 1; 
} 
.simulador .contenedor .slider-container .interno .slider::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 22px; 
    height: 22px; 
    border-radius: 50%; 
    background: #fff; 
    cursor: pointer; 
    border: 3.5px solid yellow; 
} 
.simulador .contenedor .slider-container .interno .slider ::-moz-range-thumb { 
    width: 25px; 
    height: 25px; 
    border-radius: 50%; 
    background: #fff; 
    cursor: pointer; 
    border: 3.5px solid yellow; 
} 

的JavaScript

var slider = document.getElementById("rango"); 
var output = document.getElementById("valor"); 
output.innerHTML = slider.value; 

slider.oninput = function() { 
    output.innerHTML = this.value; 
} 

function outputUpdate(val) { 
    var result = document.querySelector("#valor"); 
    result.value = val; 
    result.style.left = val + 'px'; 
} 

Answer 1

這裏有一個想法給你。只需將輸出的left樣式屬性設置爲大致等於圓的位置即可。這是通過將滑塊寬度乘以滑塊值與滑塊範圍的比值來完成的。

var slider = document.getElementById('rango'); 
 

 
slider.oninput = function() { 
 
    var output = document.getElementById('valor'); 
 
    output.innerHTML = this.value; 
 
    var sliderWidth = this.getBoundingClientRect().width; 
 
    var outputWidth = output.getBoundingClientRect().width; 
 
    var offset = this.value/(this.max - this.min) * sliderWidth - outputWidth/2; 
 
    output.setAttribute('style', 'left: ' + offset + 'px'); 
 
} 
 

 
slider.oninput();

.simulador .contenedor { 
 
    padding: 25px 22px; 
 
} 
 
.simulador .contenedor .slider-container { 
 
    padding: 35px 0px; 
 
} 
 
.simulador .contenedor .slider-container .interno { 
 
    padding: 20px 0px; 
 
} 
 
.simulador .contenedor .slider-container .interno .slidecontainer { 
 
    width: 100%; 
 
    padding-top: 18px; 
 
} 
 
.simulador .contenedor .slider-container .interno .slidecontainer output { 
 
    font-family: 'museo700'; 
 
    margin-bottom: 0px; 
 
    position: absolute; 
 
    padding: .5em; 
 
    background: transparent; 
 
    color: blue; 
 
} 
 
.simulador .contenedor .slider-container .interno .slider { 
 
    -webkit-appearance: none; 
 
    width: 100%; 
 
    height: 5px; 
 
    border-radius: 2.5px; 
 
    background: #003664; 
 
    outline: none; 
 
    -webkit-transition: .2s; 
 
    transition: opacity .2s; 
 
    border: 0; 
 
} 
 
.simulador .contenedor .slider-container .interno .slider:hover { 
 
    opacity: 1; 
 
} 
 
.simulador .contenedor .slider-container .interno .slider::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    appearance: none; 
 
    width: 22px; 
 
    height: 22px; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
    cursor: pointer; 
 
    border: 3.5px solid blue; 
 
} 
 
.simulador .contenedor .slider-container .interno .slider ::-moz-range-thumb { 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
    cursor: pointer; 
 
    border: 3.5px solid blue; 
 
}

<div class="simulador"> 
 
    <div class="contenedor"> 
 
     <h1 class="simula">Simular</h1> 
 
     <div class="slider-container"> 
 
      <div class="interno"> 
 
       <div class="slidecontainer"> 
 
        <input type="range" min="5000" max="100000" value="50000" class="slider" id="rango" oninput="outputUpdate(val)"> 
 
        <output for="rango" id="valor"></output> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>