How to make a range slider with 4 steps?

Question

I want to make a range slider with 4 steps in jQuery. See the attached image

Problem is I don't know where to start. I found this reference and I'm wondering if you could point me in the right direction. Any tips or references are appreciated.

Thanks!

Answer 1

Something like this might help you

https://github.com/freqdec/fd-slider

https://github.com/fryn/html5slider

These are vanilla JS implementations of <input type="range" /> tha can be styled as a slider

Good luck

Answer 2

Using jQuery UI you simply set the step to increment for each area, lets say this example:

$( "#slider" ).slider({
    min: 0,
    max: 3,
    step: 1 // so we'll move from 0 - 1 - 2 - 3 (4 locations)
});

Doing this logic you'll be able to move to 4 different locations. Incremental each time by 1 in this case.

More info here: http://jqueryui.com/slider/#steps