CODEWITHSUNDEEP
javascriptjqueryuser-interfaceslider
Ismailp
Ismailp

Reputation: 2383

How to make a range slider with 4 steps?

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

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!

Upvotes: 1

Views: 2273

Answers (2)

DarkThrone
DarkThrone

Reputation: 1964

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

Upvotes: 1

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66971

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

Upvotes: 0

Related Questions