Can I Make A Range Input's Value Step Up And Down On Click?
Say I have an . If I focus the input, then move up and down with the keyboard, the value changes accordingly. When I click an arbitra
Solution 1:
You can do something like this.
<!DOCTYPE html>
<script> var oldValue = 50; </script>
<input type=range max=100 step=1 oninput=" if (oldValue) { this.value = this.value > oldValue ? oldValue + 1 : oldValue - 1; } oldValue = parseInt(this.value, 10);">
Solution 2:
I just made it for you:
$("#rangecontainer").mousedown(function(event){
event.preventDefault();
var rangeInput = $(this).children();
var actualValue = parseInt(rangeInput.val());
if(event.pageX > (rangeInput.position().left + 15 + actualValue)){
rangeInput.val(actualValue+1);
}
else{
rangeInput.val(actualValue-1);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rangecontainer"><input type="range" min="0" max="100" step="1" /></div>Edit: By adding 15px to the left you avoid the position balancer bug
Post a Comment for "Can I Make A Range Input's Value Step Up And Down On Click?"