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.

const values = [1, 3, 5, 10, 20, 50, 100];

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

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

// set the default value
input.oninput();

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

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

Having the next input:

    <input id="currentTimeInput" type="range" value="1" min="0" max="60" oninput="toggleSteps(this);" list=mapsettings>
    <datalist id=mapsettings>
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>20</option>
        <option>30</option>
        <option>40</option>
        <option>50</option>
        <option>60</option>
    </datalist>

Here is my function to change the steps by 1 (0-10) and 10 (10-60)

function toggleSteps(element) {
    var minutes = parseInt(element.value);
    if (minutes > 10) {
        element.step = 10;
    } else {
        element.step = 1;
    }
}