change text size with range bar in javascript

Question

I'm trying to make a meme page and I'd like the user to be able to change the font size in their meme, I was able to achieve this with buttons that say the px size, but I'd rather it be with a range bar. can it be done with range bar?

I currently have it like this

when pressing the buttons, the size changes according to the number of pixels instead of the buttons i would like it to be a range bar like this

HTML CODE:

<div id="controles">
                <input class="form-control" type="file" accept="image/*">
                <!--estilo de bootstrap-->
                <textarea id="superior" rows="3" class="form-control">Texto superior</textarea>
                <textarea id="inferior" rows="3" class="form-control">Texto inferior</textarea>
                <button class="btn btn-primary">Guardar</button>
                <br><br>
                <button type="button" onclick="myFunction()">10px</button>
                <button type="button" onclick="myFunction2()">20px</button>
                <button type="button" onclick="myFunction3()">30px</button>
                <button type="button" onclick="myFunction4()">40px</button>
                <button type="button" onclick="myFunction5()">50px</button>
                <button type="button" onclick="myFunction6()">60px</button>
            </div>
        </div>
        <div class="col-8">
            <div id="meme">
                <p id="texto-superior"></p>
                <p id="texto-inferior"></p>
            </div>
        </div>

JS CODE:

function myFunction(){
    document.getElementById("texto-superior").style.fontSize = "10px";
    document.getElementById("texto-inferior").style.fontSize = "10px";
};
function myFunction2(){
    document.getElementById("texto-superior").style.fontSize = "20px";
    document.getElementById("texto-inferior").style.fontSize = "20px";
};
function myFunction3(){
    document.getElementById("texto-superior").style.fontSize = "30px";
    document.getElementById("texto-inferior").style.fontSize = "30px";
};
function myFunction4(){
    document.getElementById("texto-superior").style.fontSize = "40px";
    document.getElementById("texto-inferior").style.fontSize = "40px";
};
function myFunction5(){
    document.getElementById("texto-superior").style.fontSize = "50px";
    document.getElementById("texto-inferior").style.fontSize = "50px";
};
function myFunction6(){
    document.getElementById("texto-superior").style.fontSize = "60px";
    document.getElementById("texto-inferior").style.fontSize = "60px";
};

document.addEventListener('DOMContentLoaded', function(){
    const fileInput = document.querySelector('input[type = "file"]');
    const upperInput = document.getElementById('superior');
    const lowerInput = document.getElementById('inferior');
    
    const upperText = document.getElementById('texto-superior');
    const lowerText = document.getElementById('texto-inferior');

    const guardar = document.querySelector('button');


    fileInput.onchange = function(){ //esta función ocurre cuando el usuario selecciona un archivo, solo da la ruta de la foto en la compu
        const file = fileInput.files[0]; //

        const reader = new FileReader();

        reader.onload = function(event){  //Cuando termines de leerlo haz algo aquí
            const url = event.target.result;
            document.getElementById('meme').style.backgroundImage = 'url('+url+')'; //hace lo mismo que el de abajo
            //`url(${url})` ///hace lo mismo que el de arriba
        }

        reader.readAsDataURL(file); //lee el archivo que seleccionó usuario en el navegador
    };
    
    upperInput.addEventListener('keyup', function() { //cuando ocurra un keyup hago la función //keydown > keypress > value > keyup
        const valor = upperInput.value;
        upperText.innerHTML = valor.replace(/\n/g, '<br>'); //para transformar todos los enters en enters de teclado la hacemos global 
    });

    lowerInput.addEventListener('keyup', function() {
        const valor = lowerInput.value;
        lowerText.innerText = valor;
    });

    guardar.addEventListener('click', function(){
        const meme = document.getElementById('meme');
        htmlToImage.toJpeg(meme).then(function(resultado){
            const anchor = document.createElement('a');
            anchor.href = resultado;
            anchor.download = 'mi-image.jpg';
            anchor.click();
        });
    });
    
    myFunction.addEventListener('click', function(){ });
    myFunction2.addEventListener('click', function(){ });
    myFunction3.addEventListener('click', function(){ });
    myFunction4.addEventListener('click', function(){ });
    myFunction5.addEventListener('click', function(){ });
    myFunction6.addEventListener('click', function(){ });

});

can it be done with the range bar or should i stick with the buttons?

Answer 1

Yes it absolutely can, here is the example provided by w3schools. I trust you can adapt it to your needs. Keep in mind a lot of the css there is redundant.

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
}

.slidecontainer {
  width: 100%;
  /* Width of the outside container */
}


/* The slider itself */

.slider {
  -webkit-appearance: none;
  /* Override default CSS styles */
  appearance: none;
  width: 100%;
  /* Full-width */
  height: 25px;
  /* Specified height */
  background: #d3d3d3;
  /* Grey background */
  outline: none;
  /* Remove outline */
  opacity: 0.7;
  /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s;
  /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}


/* Mouse-over effects */

.slider:hover {
  opacity: 1;
  /* Fully shown on mouse-over */
}


/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  width: 25px;
  /* Set a specific slider handle width */
  height: 25px;
  /* Slider handle height */
  background: #04AA6D;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px;
  /* Set a specific slider handle width */
  height: 25px;
  /* Slider handle height */
  background: #04AA6D;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
}

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<p id="demo"></p>