How do I make a number variable from a html number input?

I am looking to add the values of two input elements (in this case sliders, but in future development one will probably become a number input) and add them together. This value I would like displayed on the console (again, in a later stage this will be a full-on part of the site using .innerHTML).

The code below treats the two values as text strings and just puts them next to each other (50+50=5050). I've tried using .parseInt instead of .value but that did not help.

My HTML code:

    <input id="FirstSliderElement" type="range" min="0" max="100">
    <input id="SecondSliderElement" type="range" min="0" max="100">
    <button onclick="thisIsMyFunction()">Show in Console</button>

My JS code:

    var sliderOne = document.getElementById("FirstSliderElement");
    var sliderTwo = document.getElementById("SecondSliderElement");

    function thisIsMyFunction() {
        console.log("Slider One:", sliderOne.value)
        console.log("Slider Two:", sliderTwo.value)
        console.log("Sum:", sliderTwo.value + sliderOne.value)
}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW