HTML5 input type range - non-linear sequence?

Question

I want to use a slider control to input a selection. The possible values are: 5000, 25000, 50000, 75000, and 100000. However, I cannot get the range input to limit to those choices. The closest thing I've got is this:

<datalist id="valid-options">
  <option>5000</option>
  <option>25000</option>
  <option>50000</option>
  <option>75000</option>
  <option>100000</option>
</datalist>
<input type="range" min="5000" max="100000" step="5000" list="valid-options" ng-model="selectedValue" />

You can see the full sample here: http://jsfiddle.net/au14Lv2t/1/

The problem with this solution is that it allows for invalid values like 10000, 15000, etc.

I'm looking for an AngularJS (or pure HTML5/JS/CSS) solution. I would prefer not to introduce jQuery.

Thanks!

Looks like you will have to use custom type range emulation. — dfsq
– dfsq, Commented Oct 29, 2014 at 22:12
@serakfalcon the UI design calls for a slider control. That's definitely the fallback position, though. — dprothero
– dprothero, Commented Oct 29, 2014 at 22:18

Alper Cinar · Accepted Answer · 2014-10-29 22:29:35Z

2

you can search for the closest valid value and set the input value to that value for each value change event

var inputElement = document.getElementById('customRangeInput');

inputElement.oninput = setInput;
inputElement.onchange = setInput;   // IE fix

function setInput(){
    inputElement.value = closestValue(inputElement.value);
}

var validValues = [5000,25000,50000,75000,100000];
function closestValue(input)
{
    var differences = [];
    for (var i = 0; i < validValues.length; i++)    
        differences.push( Math.abs(validValues[i] - input));

    var index = indexOfSmallest(differences);
    return validValues[index];      
}

function indexOfSmallest(inputArray) {
    var lowest = 0;
    for (var i = 1; i < inputArray.length; i++) {
        if (inputArray[i] < inputArray[lowest]) lowest = i;
    }
    return lowest;
}

html should look like this

<input id="customRangeInput" type="range" min="5000" max="100000" step="5000" list="valid-options" ng-model="selectedValue" />Selected Value: {{ selectedValue }}</div>

edited Oct 29, 2014 at 22:29

answered Oct 29, 2014 at 22:20

Alper Cinar

8615 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alper Cinar Over a year ago

i guess oninput event is not supported in ie11 . i'll update the code in a minute

dprothero Over a year ago

Looks like IE11's range input doesn't work with angular, either... github.com/angular/angular.js/issues/6726

Alper Cinar Over a year ago

i've updated the code . attaching this methods to onchange event nearly solved the problem for ie11 but it works a little buggy because onchange event is not fired instantly like oninput event

xploshioOn · Accepted Answer · 2014-10-29 22:14:12Z

1

you need to use property step, that let's you decide how much is every step, for your example, most values are in 25000 so make step="25000"

<input type="range" min="0" max="100000" step="25000">

and to solve the 5000 value... in your example your first value is 5000 what you do is that if you receive 0 that is your low value that is 5000... the other values increase in 25000... hope that helps.

and you don't need the datalist in this case.

answered Oct 29, 2014 at 22:14

xploshioOn

4,1333 gold badges31 silver badges40 bronze badges

2 Comments

dprothero Over a year ago

Very clever solution. What if I'm not so lucky to have 25,000 increments with only one exception? I've got other options that are not as "tidy"... what if my list of options was 1, 4, 10, 23, 30?

xploshioOn Over a year ago

then you have to write something fancy with javascript, like code down here, in other answer, but for this case in particular, I think this is a easy solution.

Chris Browne · Accepted Answer · 2015-07-15 07:44:36Z

1

Instead of trying to use the values directly, you can use a map that the range slider operates on - so your ng-model is something like myrangeIndex and when you bind your output element you use rangeValues[myrangeIndex] to get the value back out. Equally when you use the value elsewhere you will need to look it up first. If you know the list of elements might grow/shrink later on, you can use max="{{rangeValues.length}}" so that you only need to update the code in one place. If the values can be calculated from ordinal values, you can simply populate rangeValues when the controller is loaded, e.g. $scope.rangeValues = f(1,100); for any given f.

answered Jul 15, 2015 at 7:44

Chris Browne

1,6123 gold badges18 silver badges35 bronze badges

Collectives™ on Stack Overflow

HTML5 input type range - non-linear sequence?

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related