Html range input 'tick' marks – limit position

[rkhayat]

Hello Css-Trickers,

My apologizes if this belongs in the CSS forums.

I am looking for guidance on how to implement a range-input that could limit what the user can select by ‘ticks’.

Most of the range sliders I see slide, I would like mine to have X options (see attached image), the user should not be able to click in between the options provided.

I have looked into HTML range input but I have not seen any attributes that would achieve this.

Image:
https://docs.google.com/drawings/d/1CTauInyBRH3o_YlECI4jjFeuoINmjZeOfHdNKYrgbmQ/edit?usp=sharing

My original StackOverflow Question was downvoted for being too ‘conceptual’:
http://stackoverflow.com/questions/29680213/input-slider-with-tick-marks

This plugin was recommended but I would like to look into not using plugins.
http://www.eyecon.ro/bootstrap-slider/

We are using Angular for this application, along with bootstrap.

Any input is appreciated, thank you.

Edit – From a UX point of view I would rather have a slider / group of buttons as opposed to a drop down, to reduce number of clicks.

[Paulie_D]

Most of the range sliders I see slide, I would like mine to have X options (see attached image), the user should not be able to click in between the options provided.

You can use the steps attribute for that..

<form>
  <input type="range" name="points" step="10" min="0" max="100">
</form>

http://codepen.io/Paulie-D/pen/JoggwE

[rkhayat]

@paulie_D THANK YOU! This is what I was looking for. Feel free to post the answer on stack for the free points.

Thanks again! Very helpful!

[Author]

Posts