I’m pretty new to JavaScript so I’ve been messing around and teaching myself how to use the functions. I’m trying to use setInterval to make a function that constantly changes the size of the thumb based on the value of the slider.
I tried to use getElementById and other things and I can’t figure it out.
Here is the HTML:
<input type="range" class="javaRange" id="rangeInput2" name="rangeInput2" min="0" max="1000" value="0"
oninput="amount2.value=rangeInput2.value">
<output id="amount2" name="amount2" for="rangeInput2">0</output>
Here is the CSS (The slider is customized):
<style>
.javaRange {
-webkit-appearance: none;
background-color: #cdfffe;
height: 20px;
overflow: visible;
width: 400px;
border-radius: 50px;
}
.javaRange::-webkit-slider-thumb {
-webkit-appearance: none;
background: #00918f;
border-radius: 50%;
cursor: pointer;
height: 20px;
width: 20px;
border: 0;
}
</style>
and here is the JavaScript that I have currently:
<script>
const constant = 0.12;
const thumbValue = document.getElementById("rangeInput2").value;
function thumbSize(){
document.getElementById("rangeInput2").style.width = 20 + parseInt(thumbValue) + "px";
document.getElementById("rangeInput2").style.height = 20 + parseInt(thumbValue) + "px";
};
setInterval(thumbSize());
</script>
I’ve tried so many things. please help!
You need to sign in to view this answers
Leave feedback about this