Change step in HTML5 <input type="range"> on certain value

Question

I'm trying to do an HTML5 <input type="range"> that has:

Minimum value: 50
Maximum value: 2000
Default value: 50
Step: 50

<input name="flevel_gigas" id="flying" type="range" min="50" max="2000" value="50">

When the user passes 500, the step of the input will change from 50 to 250 up to 2000.

I'm doing it with JQuery. The code is:

<script>
    $(function(){
        function returnStep(value) {
            var step;
            if(value<500){
                step=50;
            }
            else{
                step=250;
            }
            return step;
        }
        $('input[name="flevel_gigas"]').on("input change",function(){
            var currentValue = $(this).val();
            $(this).attr('step', returnStep(currentValue));
        });
    });
</script>

But it not works. When the slider is at 450 it jumps to 550 then the step changes to 250 and starts counting correctly but only until 1800 (because 1800 plus 250 is 2050 and it exceeds 2000).

Could anyone help me where is the error or the misunderstanding of the range's perfomance?

You want the step attribute to vary based on the current value? Sounds like a bad UX. — Dan Wilson
– Dan Wilson, Commented Dec 30, 2016 at 14:38

Niet the Dark Absol · Accepted Answer · 2016-12-30 14:39:08Z

2

The problem here is that valid numbers are min + N * step for some integer N.

In your case, valid numbers are (with the bigger step) 50 + N * 250, which is 300 (not seen by the user in your case) 550, 800 and so on.

You will need to change the min to 0 when your step changes - it's a bit of a hack but it will provide a more functional "start value" for your increased step.

answered Dec 30, 2016 at 14:39

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shafiqul Islam · Accepted Answer · 2016-12-30 14:46:03Z

0

you can check this code

html code is this , set min value 0

<input name="flevel_gigas" id="flying" type="range" min="0" max="2000" value="50">

and jQuery Code

 <script>
  $(function(){
    function returnStep(value) {
        var step;
        if(value<500){
            step=50;
        }
        else{
            step=250;
        }
        return step;
    }
    $('input[name="flevel_gigas"]').on("input change",function(){
        var currentValue = $(this).val();
       var step =  returnStep(currentValue);
        $(this).attr('step', step);
    });
});

</script>

answered Dec 30, 2016 at 14:46

Shafiqul Islam

5,6852 gold badges36 silver badges45 bronze badges

Collectives™ on Stack Overflow

Change step in HTML5 <input type="range"> on certain value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related