Skip to content

Instantly share code, notes, and snippets.

@farnabaz
Last active September 21, 2015 17:32
Show Gist options
  • Save farnabaz/0332e1edc435918f7390 to your computer and use it in GitHub Desktop.
Save farnabaz/0332e1edc435918f7390 to your computer and use it in GitHub Desktop.
Simple Number Spinner with jQuery & Font-Awesome. DEMO: http://codepen.io/farnabaz/pen/xwOPVR
<span class="spinner">
<i class="fa fa-chevron-up" onclick="var el = $(this).siblings('input')[0]; el.value = Math.min(5, parseInt(el.value)+1)"></i>
<input type="text" name="day" value="0">
<i class="fa fa-chevron-down" onclick="var el = $(this).siblings('input')[0]; el.value = Math.max(0, parseInt(el.value)-1)"></i>
</span>
<style>
.spinner {
position: relative;
display: inline-block;
}
.spinner .fa-chevron-up {
position: absolute;
top: -15px;
left: 9px;
cursor: pointer;
}
.spinner .fa-chevron-down {
position: absolute;
left: 9px;
bottom: -10px;
cursor: pointer;
}
.spinner input {
width: 30px;
text-align: center;
background: none;
border: none;
outline: none;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment