CODEWITHSUNDEEP
jqueryhtmljquery-ui
Rodrigo Graça
Rodrigo Graça

Reputation: 2165

How to create a simple spinner in HTML? Or jQuery

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 :D

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?! :D

Upvotes: 2

Views: 53509

Answers (4)

Adrian S.
Adrian S.

Reputation: 137

The HTML code for the spinner box looks like this:

<input type="number" min="0" max="50" step="2" value="0" size="6" name="cantitate">

The TYPE is "number". The MIN and MAX are the start and end values you want for the value. The STEP attribute is the increase or decrease in value when you click on the arrows. The VALUE is the default that appears in the box when the page loads, and also the value that is returned when the form is sent. SIZE refers to how wide you want the box.

Upvotes: 3

Ian Stanway
Ian Stanway

Reputation: 610

You could use the spinner from the upcoming jQuery UI 1.9, although you'd have to be happy with using the library in beta. Here's a demo.

Chrome (8) and Opera (11) both use the native HTML5 spinner, but it's ugly IMO.

Upvotes: 1

Chad Hedgcock
Chad Hedgcock

Reputation: 11765

http://github.com/fgnass/spin.js

  • No images
  • no external CSS
  • No dependencies
  • Highly configurable
  • Resolution independent
  • Uses VML as fallback in old IEs
  • Uses @keyframe animations, falling back to setTimeout()
  • Works in all major browsers, including IE6
  • Small footprint (~1.9K gzipped)

Upvotes: 6

Ankur Verma
Ankur Verma

Reputation: 5933

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

Upvotes: 1

Related Questions