Question

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

HTML

QtConcurrent

CSS （我正在使用Sass，但这里是渲染）

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

的JavaScript

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

Answer 1

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

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

在拇指上显示滑块范围值

1 个答案: