html input range step as an array of values

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

<input id="input" type="range" min="0" value="0" max="6" step="1">
<div id="output"></div>

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/

Karmacon's answer works just fine, but don't forget to add the attribute aria-valuetext to the input element. It will help screen readers read out the correct value.

MDN provides a good example: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role#Example_2_Text_Values

According to the W3C spec, the values for step can be "any" or a positive floating-point number. That's it.

The step attribute, if specified, must either have a value that is a valid floating-point number that parses to a number that is greater than zero, or must have a value that is an ASCII case-insensitive match for the string "any".