엄지 손가락 상단에 슬라이더 범위 값 표시

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; 
} 

자바 스크립트

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>