JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<input type="number" name="number1" min="1" max="1" value="1" id="inputSteps">

JavaScript

var steps = [1, 2, 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128];
var input = document.getElementById("inputSteps");
input.min = 0;
console.log("--", input.min)
var inputVal = 1;
input.addEventListener("click", changeInputStep);

function changeInputStep(e) {
console.log(this==input, e)
  var dir = 0;
  if (this.value > inputVal) {
    dir = 1;
  } else if (inputVal > 1) {
    dir = -1;
  }
  var newValue = steps.indexOf(inputVal) + dir;
  this.min = steps[newValue-1]>1?steps[newValue-1]:1;
  this.max = steps[newValue+1]?steps[newValue+1]:steps[steps.length];
  console.log(input.max, steps[newValue], this.max, this.min)
  this.value = steps[newValue];
  inputVal = parseInt(this.value);
console.log(this, e)
}