CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsinput
user3196599
user3196599

Reputation:

input slider with 'tick marks'

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

Upvotes: 1

Views: 7302

Answers (2)

Paulie_D
Paulie_D

Reputation: 115099

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>

Upvotes: 3

Toby Cannon
Toby Cannon

Reputation: 735

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.

Upvotes: 2

Related Questions