更改HTML5中的步骤 <input type=“range”> 有一定价值

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?

Answer 1

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.

Answer 2

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>