CODEWITHSUNDEEP
javascripthtmlcssslider
TheWoodStudio
TheWoodStudio

Reputation: 213

Show slider range value on top of thumb

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

Upvotes: 1

Views: 3059

Answers (1)

Nick
Nick

Reputation: 16606

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>

Upvotes: 1

Related Questions