Search code examples
htmlsliderrangeslider

How can I set my range sliders max to be the windows width / 10


How can i make a range sliders max to be the windows width / 10, something like this:
<input type="range" min="0" max="100vw/10"
Previously what i had in my code was:

<input type="range" id="rangeSlider" min="0" max="100">
<p id="p"></p>
<button id="getValueButton>Get Value</button>

let rangeSlider = document.querySelector("#rangeSlider");
let p = document.querySelector("#p");
let getValueButton = document.querySelector("#getValueButton");
getValueButton.onclick = function() {
    p.innerHTML = `${rangeSlider.value * 12.5} pixels from the left`;
}

let rangeSlider = document.querySelector("#rangeSlider");
let p = document.querySelector("#p");
let getValueButton = document.querySelector("#getValueButton");
getValueButton.onclick = function() {
    p.innerHTML = `${rangeSlider.value * 12.5} pixels from the left`;
}
<input type="range" id="rangeSlider" min="0" max="100">
<p id="p"></p>
<button id="getValueButton">Get Value</button>


Solution

  • You can set the max value like this:

    document.getElementById('rangeSlider').max = window.screen.width / 10