I am looking to be pointed in the right direction with creating this input slider. I have done a little bit of research and I believe the appropriate route to take would be using the html range input type.

My question is what would be the best way to approach having 'tick marks' and not allowing users to land in between these options?

Does html range input have an attribute to limit the slider position / options?

I am assuming this cannot be done purely with the input type / attibutes, and I would need to use JS/Jquery.

I am using Angular with Bootstrap for the UI. Please see image for mock-up.

Thank you

I am looking to be pointed in the right direction with creating this input slider. I have done a little bit of research and I believe the appropriate route to take would be using the html range input type.

My question is what would be the best way to approach having 'tick marks' and not allowing users to land in between these options?

Does html range input have an attribute to limit the slider position / options?

I am assuming this cannot be done purely with the input type / attibutes, and I would need to use JS/Jquery.

I am using Angular with Bootstrap for the UI. Please see image for mock-up.

Thank you

• javascript
• jquery
• html
• angularjs
• input

Share Improve this question Follow edited Apr 16, 2015 at 16:32 asked Apr 16, 2015 at 16:04 user3196599user3196599 4

• Not sure why the down vote, would appreciate reasoning / input. – user3196599 Commented Apr 16, 2015 at 16:08
• 1 You're being downvoted because SO is for solving issues with code, not for plugin remendations. That said, the first hit in google for 'bootstrap slider' was this: seiyria.github.io/bootstrap-slider. hopefully its of some help. – Rory McCrossan Commented Apr 16, 2015 at 16:10
• @RoryMcCrossan your remendation is appreciated but even with the examples that have 'tick' marks I am unable to limit the user from clicking in between those options. – user3196599 Commented Apr 16, 2015 at 16:15
• @RoryMcCrossan Bad downvote! Even in its original form, this question was about how to create a slider. Yes, the OP mentioned specific frameworks, but nobody asked for plugins. – Auspex Commented Feb 8, 2017 at 21:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can use the steps attribute for that. The rest is just styling.

function outputUpdate(num) {
document.querySelector('#output').value = num;
}

form {
  margin-top: 25px;
  text-align: center;
  
}

input {
  width: 80%;
  display: block;
  margin: 0 auto;
}

output {
  display: block;
  margin: 25px auto;
  font-size:2em;
}

<form>
  <input type="range" id="value" value="25" step="25" min="0" max="100" oninput="outputUpdate(value)">
  <output for=value id="output">25</output>
</form>

There are a couple of good bootstrap sliders for set intervals.

There a few different styles of sliders on here, pick whichever is best suited for your project.

There are a few more available on github you can find here

Both e with documentation on how to implement, as well as examples.