title: Multiple step values in the HTML number input
body: <p>I am trying to customize an HTML number input so that the <code>step</code> value increases after a certain number then increases more after another one. For example, this is the increment pattern I am trying to achieve:</p>
  
  <blockquote>
    <p>1, 2, 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128</p>
  </blockquote>
  
  <p>1 is the first increment, 2 is the next, then 4, 8, 12, and so on. I have been doing research on this, but I cannot find any example that has been done already. Not even on this site. I tried using <code>1,2,4,8,12,16,20,24,32,48,64,96,128</code> as the <code>step</code> value, but it reverts to 1.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="number" name="number1" min="1" max="128" step="1" value="1"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I write the <code>step</code> value so that this can happen, or must I use JavaScript for this instead?</p>