Spinner JQuery UI

To enter numeric value in a text field, buttons can be provided to increase or decrease the value, user can use Page UP and Page Down for a jump in increment or decrement steps.
<input id="spinner" class='selector' size=3>
<script>
$(document).ready(function() {
$( "#spinner" ).spinner();
});
</script>
Output is here
Use keyboard up and down arrow to increase or decrease count. For a jump in incrementing the count by 10 use Page Up key, same way use Page Down to decrement the count by 10.

Maximum and Minimum value

<script>
$(document).ready(function() {
$( "#spinner" ).spinner();
$( ".selector" ).spinner({
  max: 20,
  min: -10
});
})
</script>

Step and Page Up Down

Default value for step is 1 , default value for Page is 10 . Final increment or decrement by Page up or Page down is step * page.
Example : if step is 2 and page is 7 then Page up will move by 14.
<script>
$(document).ready(function() {
$( "#spinner" ).spinner();
$( ".selector" ).spinner({
step:5,
page:3
});
})
</script>

Getting the value of the Spinner

var value = $( "#spinner" ).spinner( "value" );

Set the value of the Spinner

$( "#spinner" ).val(value)

Change Event

This is fired when value in spinner is changed and focus is taken out of the spinner. This is not fired as we keep changing the value of the spinner.

Spin Event

This event is fired on changing of the value of the spinner. For every step change or page up down change this event is fired.

With the above knowledge we can link one Slider with Spinner, so any one can be changed to reflect the same change in other element. Example: we can change the slider to change the value of the spinner and vice versa.

More on JQuery UI Slider

Subscribe to our mailing list

* indicates required
Subscribe to plus2net
Your Rating


Google+

Post Comment This is for short comments only. Use the forum for more discussions.




Subscribe to our mailing list

* indicates required
Subscribe to plus2net



Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer