Predefined steps in html input type range

Question

I would create a field of type range where the steps would be pre-defined and non-linear (multiple of some number) with html5.

How do I? The code below does not work. Jquery is required? If yes, have examples?

<input type='range' min ='0' max='50' step='15, 20, 26, 36, 50' class='' id='TaxaOportunidade' style=' width: 100%; display: inline; text-align: right;'  />

`step` can only be 1 value, not multiple, so you might need jQuery. Tried anything with jQuery? — putvande, Jul 31 '14 at 14:29
Sounds like you'd be better off with a select or a radio group. — Quentin, Jul 31 '14 at 14:30

score 0 · Accepted Answer · answered Jul 31 '14 at 14:44

I tried this code today, I hope this will solve your problem:

    <!DOCTYPE html>
    <html>
    <body>

    <form action="demo_form.asp" method="get">
    <script type="text/javascript">
    function abc(){
    if(sld.step=='0')
           sld.step='15';
    else if(sld.step=='15')
           sld.step='36';
    val.innerHTML=sld.value;
    }
    </script>

    <input onchange="abc();" type='range' min ='0' max='50' step='0' class='' id='sld' style=' width: 100%; display: inline; text-align: right;'  />
    <span id="val"></span>
    </form>

    </body>
    </html>

Predefined steps in html input type range

1 Answers1