input type range with specific numbers

Question

I have an input type range which is Min of 0 and Max of 100

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange" >
  <input type="text" id="rangeValue">
</div>

And my JS

  var slider = document.getElementById("myRange");
    var output = document.getElementById("rangeValue");
    $(output).val(slider.value);
    slider.oninput = function() {
        $(output).val(slider.value);
    }

And it working:

But, what I want to happen is not all range 1-100. But when you try to scroll it, it will only show specific numbers, not all numbers between 1-100. For example. 10, 25 ,50 , 65 , 82, 88, 90, 98 , 100 only

Having trouble with this. Thank you

is there any pattern to the numbers that you want, or is it exactly 10, 25 ,50 , 65 , 82, 88, 90, 98 or 100? You could set the step attribute, but that will make it go up/down by specified amounts (so `step="5"` will get you 0, 5, 10, 15, etc) — lucas, Aug 23 '19 at 07:19
Possible duplicate of [JQuery Slider, how to make "step" size change](https://stackoverflow.com/questions/967372/jquery-slider-how-to-make-step-size-change) — Abdulhaq Shah, Aug 23 '19 at 07:21
@lucas yes thats exact number I want, not odd numbers, not even numbers and not 5 skips but exactly 10, 25 ,50 , 65 , 82, 88, 90, 98 or 100? . Sorry I'm not sure if this is even possible — ICG DEVS, Aug 23 '19 at 07:21
Possible duplicate of [jQuery UI Slider - max value (not end of slider)](https://stackoverflow.com/questions/8646796/jquery-ui-slider-max-value-not-end-of-slider) — Lalji Tadhani, Aug 23 '19 at 07:24
https://stackoverflow.com/questions/681303/is-there-a-plugin-or-example-of-a-jquery-slider-working-with-non-equably-divisibl — Lalji Tadhani, Aug 23 '19 at 07:25

Florian Seurre · Answer 1 · 2019-08-23T07:53:38.970

Well, you have two possibilities:

You can use the step attribute on your input to define a specific granularity
If you want a specific step between your values, you can define a datalist linked to your slider (eg. https://developer.mozilla.org/fr/docs/Web/HTML/Element/datalist)

<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="10">
  <option value="25">
  <option value="50">
  <option value="65">
  <option value="82">
  <option value="88">
  <option value="90">
  <option value="98">
  <option value="100">
</datalist>

score 3 · Answer 2 · answered Aug 23 '19 at 07:42

You have to make a custom function for that

var slider = document.getElementById("myRange");
var output = document.getElementById("rangeValue");
var arr = [10, 25, 50, 65, 82, 88, 90, 98, 100];
var ele = document.querySelector('.slider')
ele.setAttribute('step', arr[0]);
var i = 0;

function a() {
  ele.removeAttribute('step')
  var value = ele.value
  for (i = 0; i < arr.length; i++) {
    if (arr[i] > value) {
      ele.value = arr[i]
      break;
    }
  }
  document.querySelector('span').innerHTML = ele.value
}

<div class="slidecontainer">
  <input type="range" min="0" max="100" step="5" value="50" class="slider" id="myRange" onchange="a()">
</div>
<span>0</span>

score 2 · Accepted Answer · answered Aug 23 '19 at 07:29

2

You could map your slider values to an array although it breaks the intuitive nature of the UI a little...

<div class="slidecontainer">
  <input type="range" min="0" max="8" value="4" class="slider" id="myRange" >
  <input type="text" id="rangeValue">
</div>    
<script>
  var slider = document.getElementById("myRange");
    var output = document.getElementById("rangeValue");
    var vals =[10, 25 ,50 , 65 , 82, 88, 90, 98 , 100];
    $(output).val(vals[slider.value]);
    slider.oninput = function() {
        $(output).val(vals[slider.value]);
    }
</script>

answered Aug 23 '19 at 07:29

lucas

1,485
13
22

This actually works, I will accept this as answer but before that can you please tell why you set max = `8` instead of `100`? – ICG DEVS Aug 23 '19 at 07:38
1

because the array has 9 numbers in it, so 0 = 10, 1 = 25, 2 = 50 up to 8 = 100 – lucas Aug 23 '19 at 07:41
1

Okay, I understand now, this works and more simple. Thanks! – ICG DEVS Aug 23 '19 at 07:42
1

No problem. If your array is likely to change you can accommodate that by setting the max attribute according to the array's length: `slider.setAttribute("max", vals.length-1);` – lucas Aug 23 '19 at 07:58
1

Actually, this is the best and the cleanest solution. Well done. – cнŝdk Aug 23 '19 at 08:23

score 1 · Answer 4 · answered Aug 23 '19 at 07:15

All you need for this is the step attribute on your input element:

var slider = document.getElementById("myRange");
  var output = document.getElementById("rangeValue");
  $(output).val(slider.value);
  slider.oninput = function() {
      $(output).val(slider.value);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer">
  <input type="range" min="0" max="100" step="5" value="50" class="slider" id="myRange" >
  <input type="text" id="rangeValue">
</div>

(See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)

It is skip by 5, but the numbers only I want is specific numbers not odd numbers, not even numbers and not by 5 skips, what I want is exactly this `10, 25 ,50 , 65 , 82, 88, 90, 98 , 100` and this numbers has no patterns and not skip by 5 only. Is this possible? — ICG DEVS, Aug 23 '19 at 07:19

score 1 · Answer 5 · answered Aug 23 '19 at 07:39

Actually yes you can use the step or list attributes, but this is not enough to validate the entered value.

You need to use a certain validation control along with the datalist and the list attribute, and when the value is out of range just reset it.

let values = Array.from($("#values option")).map(v => +v.value);

slider.oninput = function(e) {
  //Check wether the inputted value is in the range of values
  if (values.some(val => val == slider.value)) {
    $(output).val(slider.value);
  } else {
    slider.value = 0;
  }
}

Demo:

var slider = document.getElementById("myRange");
var output = document.getElementById("rangeValue");
$(output).val(slider.value);
let values = Array.from($("#values option")).map(v => +v.value);

slider.oninput = function(e) {
  if (values.some(val => val == slider.value)) {
    $(output).val(slider.value);
  } else {
    slider.value = 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange" list="values">
  <input type="text" id="rangeValue">
  <datalist id="values" style="display:none;">
    <option value="10">
    <option value="20">
    <option value="30">
    <option value="50">
    <option value="65">
    <option value="80">
    <option value="100">
  </datalist>
</div>

input type range with specific numbers

5 Answers5