如何在html，javascript中的一个范围输入中使用不同的step属性

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. 但我的年度名单是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: 一开始，我想使用10，一次更改为5，然后更改为1.我的javascript是：

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

Thank you in advance 先感谢您

Answer 1

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/ 演示： https ： //jsfiddle.net/logual/7uLftnc6/1/

如何在html，javascript中的一个范围输入中使用不同的step属性

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-04-23 16:19:15

如何在html，javascript中的一个范围输入中使用不同的step属性

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-04-23 16:19:15

解决方案1
2 已采纳 2016-04-23 16:19:15