How to use values from HTML5 Input Type Range?
Question
I have in my html page a slider with value from 0 to 0.5:
<fieldset>
<label for="rangeVal">threshold</label>
<input type ="range" max="0.5" min="0"
oninput="document.getElementById('rangeValLabel').innerHTML = this.value;"
step="0.01" name="rangeVal" id="rangeVal" value="0.1">
</input>
<em id="rangeValLabel" style="font-style: normal;"></em>
</fieldset>
and i have a list of words in the same html page like:
"new":0.3,"blue":0.6,"Green":0.04
i want to do something like: if i move the cursor to 0.4, it display only words that the value = 0.4 and if i change the cursor of the slider to 0.3, it show words with value = 0.3 and always in the same html page.. I need to get the values from an input slider as it changes; however, I want only to get the value from the slider after the mouse is released, not during the mousedown and drag, then display word according to the value of input slider.. help please?
1 answers
solution1
-2 2020-12-08 15:02:44
<body>
<fieldset>
<label for="rangeVal">threshold</label>
<input type ="range" max="0.5" min="0"
oninput="showWord(this)"
step="0.01" name="rangeVal" id="rangeVal" value="0.1">
</input>
<em id="rangeValLabel" style="font-style: normal;"></em>
</fieldset>
<script>
function showWord (element) {
let wordList = {
0.03:"New",
0.04: "Green",
0.06: "Blue"
}
document.getElementById('rangeValLabel').innerHTML =
wordList[element.value];
}
</script>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.