CODEWITHSUNDEEP
javascripthtmlforms
user1419810
user1419810

Reputation: 846

Range Slider with direct number input

Is it possible to utilise a range slider in a form field and also allow a user to input the value through typing a number, i.e. having input type="range" and input type="number" on the same form field with the one utilised overriding the other?

Ok, so in response to the below here is my code:

<label for="monday">Monday Sales Target - $<span id="monday"></span></label>
<input type="range" min="0" max="5000" id="monday" name="monday" value="0" step="50" oninput="showValue1(this.value)" />

JavaScript:

function showValue1(newValue) { 
    document.getElementById("monday").innerHTML=newValue;
}

At the moment the range slider changes and outputs the number selected at the end of the label however some users are complaining that the slider is too fiddly and would like to enter the number directly through a number input. Is this possible?

Upvotes: 2

Views: 5032

Answers (1)

cнŝdk
cнŝdk

Reputation: 32145

You can make the range value change according to the input value using onkeyup event with the input, here's what you will need:

HTML:

JS:

function changeRangeValue(val){
    document.getElementById("range").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
    showValue1(val);
}

Demo:

function showValue1(newValue) { 
    document.getElementById("monday").innerHTML= newValue;
}

function changeRangeValue(val){
    document.getElementById("range").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
    showValue1(val);
}

function changeInputValue(val){
    document.getElementById("number").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
    showValue1(val);
}
<input type="number" id="number" min="0" max="5000" onkeyup="changeRangeValue(this.value)"/> 
<br />

<label for="monday">Monday Sales Target - $<span id="monday"></span></label>

<input type="range" min="0" max="5000" id="range" name="monday" value="0" step="50" oninput="changeInputValue(this.value)" />

Note:

You can't set the same id for multiple elements in HTML.

Upvotes: 3

Related Questions