Question

Is possible to create a spinner in HTML? Only HTML? A tag maybe?

My HTML:

<label for="time">Tempo:</label>
<input type="text" name="time" id="time" value="" style="width: 150px;" />

If not can we use some jquery? Something like “datepicker”
or like this

$("#time").spinner({ options });

Something realy simple 😀

I found this but i can’t understand how to use it.

http://docs.jquery.com/UI/Spinner/spinner

EDIT:

IF I USE THIS:

<label for="time">Tempo:</label>
<input type="number" name="time" id="time" value="0" style="width: 150px;" />

(The diference is the input type)

Chrome automatically creates the spinner (+1/-1) but the same does not happen with firefox (and not tested on IE)

Why people still use other browsers?! 😀

Answer 1

https://github.com/btburnett3/jquery.ui.spinner

Load css and javascript using respective tags

<script type="text/javascript" src="js/jSpinner/ui.spinner.js"></script>
.
.
.
<link rel="stylesheet" type="text/css" href="css/jSpinner/ui.spinner.css" />


.
$("#time").spinner({
    min : 0,
    max : 100,
    showOn : 'both'
});

PS:please load jquery and jquery.ui plugin before loading the ui.spinner.js