I have an input field of type number which ranges from 1 to 4096 as follows:
<input max="4096" min="1" name="size" step="2" type="number" value="4096">
Iam currently using a step = 2, that result in numbers 2, 4, 6, 8, 10, ...
1 , 2, 4, 8, 16,...?Note:
The field can contain only these values (The user shoudn't be able to insert 3 , 5 , 6, 7, ...). And it should work on both increment and decrement.
On
This works.
$("#numbercruncher").change(function(){
var a=parseInt($("#numbercruncher").val());
var b =a*2-1;
$("#numbercruncher").attr("step",b);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" min="1" max="1000" id="numbercruncher"step="2">Or this
<input type="number" min="1" max="2000" onchange="this.step=this.value*2-1">This thread is old, but nowadays, just put step in the html tag:
<!DOCTYPE html>
<html>
<body>
<h1>The input step attribute</h1>
<form action="/action_page.php">
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="0.2">
<input type="submit">
</form>
</body>
</html>
Source: W3CSchool
The native stepper doesn't suit your requirements. Your best bet would be to implement a custom solution.
I put together an example. Have a look at it: