CODEWITHSUNDEEP
htmlhtml-input
Peter Dev
Peter Dev

Reputation: 285

html input range step as an array of values

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 spec and I see the possibility for a datalist but it seams the data list is only used for highlight values in a range, so to speak, but not setting the values in the range.

So, something like this (ideally without a jQuery plugin, etc.):

<input type="range" min="1" max="100" value="0" step="1,3,5,10,20">

Upvotes: 17

Views: 35221

Answers (4)

Karmacon
Karmacon

Reputation: 3190

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>

Upvotes: 70

benjazehr
benjazehr

Reputation: 365

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

Upvotes: 8

j08691
j08691

Reputation: 207901

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".

Upvotes: 2

IgniteCoders
IgniteCoders

Reputation: 4980

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;
    }
}

Upvotes: 5

Related Questions