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

cod*_*key 5 html javascript input range d3.js

我尝试使用我的年份滑块的输入范围。

<input id="slider" min="1965" max="2012" step="10" value="1965" type="range">
Run Code Online (Sandbox Code Playgroud)

但我的年份列表是1965、1975、1985、1995、2005、2010、2011、2012。我需要在此滑块中使用不同的步骤。一开始我想用10,一次改成5,然后改成1。我的javascript是:

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

先感谢您

Ali*_*dov 3

我为你的问题准备了一个小解决方案。Step 属性将取决于范围的当前值。

<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>
Run Code Online (Sandbox Code Playgroud)

演示: https: //jsfiddle.net/logual/7uLftnc6/1/

在此输入图像描述

在此输入图像描述

在此输入图像描述