how to use different step attribute in one range input in html, javascript
<p>I tried to use input range for my year slider.</p>

<pre><code>&lt;input id="slider" min="1965" max="2012" step="10" value="1965" type="range"&gt;
</code></pre>

<p>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:</p>

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

<p>Thank you in advance</p>