2

I need a range slider recommendation with possibility to customize range steps.

For example my range steps should be as:

a - b - c - d

with associated values of (0, 1, 2, 3). I need to be able to select minimum and maximum value for the range.

I did some Googling but couldn't find any.

Top two range sliders are (as it seems to me at least): rangeslider and nouislider but I can't figure out how to tweak any of them to do what I need.

I'm using materializecss and jQuery for my app so I would prefer solutions based upon these libraries but any suggestion is appreciated as it seems to me that this won't be an easy task.

Thanks!

dbr
  • 1,037
  • 14
  • 34
  • Why not use a normal range element and map the numbers to letters? – Scott Marcus Nov 23 '16 at 23:35
  • Hm, could you point me to some example. I might have missed something basic here. Also, I need min and max values here. Will update my question. – dbr Nov 23 '16 at 23:37
  • Check my answer below for a working example. – Scott Marcus Nov 23 '16 at 23:49
  • I believe the behavior of the tickers change from browser to browser. – Redu Nov 23 '16 at 23:57
  • This seems like it's going to be one fun task... I hoped something like this already exists, guess not. I will post my solution when I find one, hopefully soon. – dbr Nov 24 '16 at 00:01
  • [this answer](http://stackoverflow.com/a/29875717/4543207) may give you a start up. – Redu Nov 24 '16 at 00:01

1 Answers1

3

Why not use a normal range element and map the numbers to letters? 

var rng = document.getElementById("rng");
var ro = document.getElementById("rngOutput");
var myRange = ["a","b","c","d"];

function updateRange(){
   ro.textContent = myRange[parseInt(rng.value, 10)];
   console.log("Selected value is: " + myRange[parseInt(rng.value, 10)] + ", Associated value is: " + rng.value);
};

window.addEventListener("DOMContentLoaded", updateRange);
rng.addEventListener("input", updateRange);
<input type="range" id="rng" min="0" max="3" value="0"><span id="rngOutput"></span>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • This make sense (at least on first view, my js is not very good) but how do I use it with upper and lower bound? – dbr Nov 23 '16 at 23:55
  • You can set the upper and lower numeric values in the HTML. The array with the letters can be declared once, with all the letters you may want. – Scott Marcus Nov 24 '16 at 00:27