7
Input slider with 'tick marks'
source link: https://www.codesd.com/item/input-slider-with-tick-marks.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Input slider with 'tick marks'
advertisements
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
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>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK