how to use different step attribute in one range input in html, javascript

Question

I tried to use input range for my year slider.

<input id="slider" min="1965" max="2012" step="10" value="1965" type="range">

But my year list is 1965,1975,1985,1995,2005,2010,2011,2012. I need to use different steps in this slider. At the beginning, I want to use 10, and change to 5 for once, and then change to 1. My javascript is:

d3.select("#slider").on("change", function(){
    $("#sliderValue").append(this.value);
 });

Thank you in advance

I mean I want to change it in the specific step. like step is 10 for 1965 1975 1985... and step is 1 for 2010,2011,2012? Sorry to misunderstanding — codemonkey
– codemonkey, Commented Apr 23, 2016 at 16:18

Ali Mamedov · Accepted Answer · 2016-04-23 16:56:31Z

3

I have prepared a small solution for your question. Step attribute will depend on range's current value.

<html>
<head>
    <script  src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script type="text/javascript">

        $(function() {

            $('#years').on('input change', function() {

                var
                    element = $('#years'),
                    value = element.val(),
                    step;

                /* 
                    Map your rules 
                */
                if (value < 1995) {

                    step = 20;
                }
                else {

                    step = 1;   
                }

                element.attr('step', step);

                $('#value').text(value);
                $('#step').text(step);
            });
        });

    </script>
</head>
<body>
    <div>
        Current value: <span id="value"></span>
    </div>
    <div>
        Current step: <span id="step"></span>
    </div>
    <div>
        <input id="years" type="range" value="1965" min="1965" max="2015" />
    </div>
</body>
</html>

Demo: https://jsfiddle.net/logual/7uLftnc6/1/

edited Apr 23, 2016 at 16:56

answered Apr 23, 2016 at 16:19

Ali Mamedov

5,2413 gold badges38 silver badges51 bronze badges

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

4 Comments

codemonkey Over a year ago

Thank you so much.

codemonkey Over a year ago

Hi, I also have a question about, assume now we have 2012 and step will be 1, right? But I want to go back to 1965, step would also be 1, so that it will have errors. Do you have some solutions?

Ali Mamedov Over a year ago

I have made tests with 2012 and 1965, and no error occurs. When set It to 2012, step = 1, when I go back to 1965, step become 20... I do many experiments and give the same result... Can you check It again? Please repeat your experiments on this fiddle: jsfiddle.net/logual/7uLftnc6/1

codemonkey Over a year ago

Hi, I know if you go to 1965, step will be 20. But when you go to 2012, step will be 1, and you might go to other years like 1989, 1993,1997, because step is 1. But years I only have were 1965,1975,1985.... Step was 1 can let users go to any years they want, which will cause me error because I don't have these years data. Do you have any solutions? Thank you so much

Collectives™ on Stack Overflow

how to use different step attribute in one range input in html, javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related