html input range step as an array of values

Question

I\'ve been playing around with the input type=range for the first time, and ideally I\'d like to set the step value to an array of values. I looked over the spe

Answer 1

You can achieve this by storing the values in an array and using the slider as the indexer for the array. This example will step through 1, 3, 5, 10, 20, 50, 100 as you slide.

HTML

JS

var values = [1,3,5,10,20,50,100];    //values to step to

var input = document.getElementById('input'),
   output = document.getElementById('output');

input.oninput = function(){
    output.innerHTML = values[this.value];
};
input.oninput(); //set default value

Fiddle: http://jsfiddle.net/26xk026z/1/