1

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.

enter image description here

Thank you

5
  • Not sure why the down vote, would appreciate reasoning / input.
    – user3196599
    Apr 16, 2015 at 16:08
  • 1
    You're being downvoted because SO is for solving issues with code, not for plugin recommendations. That said, the first hit in google for 'bootstrap slider' was this: seiyria.github.io/bootstrap-slider. hopefully its of some help. Apr 16, 2015 at 16:10
  • Thank you for your input, I will edit my question.
    – user3196599
    Apr 16, 2015 at 16:10
  • @RoryMcCrossan your recommendation 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
    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
    Feb 8, 2017 at 21:07
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>

2

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 come with documentation on how to implement, as well as examples.

2
  • Thank you for your input, I will try bootstrap-slider.js. My goal is to limit the user from clicking in-between the options provided.
    – user3196599
    Apr 16, 2015 at 16:19
  • 1
    @Dnwebdev As I stated in my answer, they provide set intervals, which would limit the user from doing this, if this helped please can you mark as correct answer, good luck with your project! Apr 16, 2015 at 16:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy