在拇指顶部显示滑块范围值

2022-01-24 00:00:00 slider javascript html css

我有这个范围滑块，基于 W3Schools 提供的滑块.一切正常，除了我希望它的值显示在拇指上方，所以当你滑动它时，它会随之滑动.我在 JS 上尝试过一些东西，但它不起作用:这是我的代码:

I have this range slider, based on the one provided by W3Schools. Everything works fine, except that I want the value of it to show above the thumb, so when you slide it, it slides with it. I have tried something on JS, but it doesn't work: Here's my code:

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(我使用的是 Sass，但这里是渲染)

CSS (I'm using Sass, but here's the render)

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

推荐答案

这是给你的一个想法.只需将输出的 left 样式属性设置为大致等于圆的位置.这是通过将滑块宽度乘以滑块值与滑块范围的比率来完成的.

Here's an idea for you. Just setting the left style attribute of the output to roughly equal the position of the circle. This is done my multiplying the slider width by the ratio of the slider value to the slider range.

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>

相关文章