The AJAX Control Toolkit includes a Numeric Up/Down Control Extender that lets you turn a text box into a numeric Up / Down input control.

There is a slick jQuery UI plugin – the jQuery UI Spinner - that lets us do this without the Ajax Control Toolkit and have pretty detailed control over the way our input works.

Some of the built-in capabilities include:

  • Mouse Wheel Support
  • Control over the Mouse Wheel Increment sensitivity
  • Variable “step” increments
  • Set-able Minimum and Maximum Values

Here is our demo UI.

And here is our code :


<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master' 
         AutoEventWireup='true' CodeFile='Default.aspx.cs' 
		 Inherits='_Default' %>

<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
<link href='Content/themes/base/jquery.ui.all.css' rel='stylesheet' 
      type='text/css' />
<link href='Styles/Site.css' rel='stylesheet' type='text/css' />
<link href='Styles/ui.spinner.css' rel='stylesheet' type='text/css' />
<script src='Scripts/jquery-1.4.4.js' type='text/javascript'></script>
<script src='Scripts/jquery-ui-1.8.13.js' type='text/javascript'></script>
<script src='Scripts/ui.spinner.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery().ready(function ($) {
	$('#updown').spinner({ min: -100, max: 100 });
	$('#updownfast').spinner({ min: -1000, max: 1000, increment: 'fast' });
	$('#updownhide').spinner({ min: 0, max: 100, showOn: 'both' });
	$('#updownnull').spinner({ min: -100, max: 100, allowNull: true });
	$('#updowndisable').spinner({ min: -100, max: 100 });
	$('#updownmaxlen').spinner();

	$('#updownconfig').spinner(
	   { min: -1000, max: 1000, step: 1, increment: 'fast' }
	   );
	$('#updownmax').spinner().change(function ()
	   { $('#updownconfig').spinner('option', 'max', 
	                                 parseInt($(this).val())); } 
	   );
	$('#updownmin').spinner().change(function ()
	   { $('#updownconfig').spinner('option', 'min', 
	                                 parseInt($(this).val())); }
	   );
	$('#updownstep').spinner().change(function ()
	   { $('#updownconfig').spinner('option', 'step', 
	                                 parseInt($(this).val())); }
	   );  
	$('#updownspeed').change(function ()
	   { $('#updownconfig').spinner('option', 'increment', $(this).val()); }
	   );
	$('#updownmousewheel').change(function ()
	   { $('#updownconfig').spinner('option','mouseWheel',
	                                 $(this).is(':checked')); }
	   );
	$('#enable').click(function () 
	 { $('#updowndisable').spinner('enable'); });
	$('#disable').click(function () 
	 { $('#updowndisable').spinner('disable'); });
	$('#GetValue').click(function () 
	 { alert($('#updown').spinner('value')); });
	$('#destroy').click(function () 
	 { $('#updown').spinner('destroy'); });

});
</script>
</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
     ContentPlaceHolderID='MainContent'>
<h2>
    Welcome to ASP.NET!
</h2>
<br />
Up Down : 
<asp:TextBox ID='updown' runat='server' ClientIDMode='Static' Text='0'>
</asp:TextBox>
<input type='button' id='GetValue' value='Get Value' /> 
<input type='button' id='destroy' value='Destroy' />
<br /><br />

Fast Up / Down :	
<asp:TextBox ID='updownfast' runat='server' ClientIDMode='Static' Text='0'>
</asp:TextBox> 
<br /><br />
    
Up / Dopwn Hidden: 
<asp:TextBox ID='updownhide' runat='server' ClientIDMode='Static' Text='0'>
</asp:TextBox> Except for  When Active !
<br /><br />   
	    
<hr />
<div id='example'>
<table class='grid'>
  <tr>
     <td>Configurable Up/Down:</td>
     <td>
     <asp:TextBox ID='updownconfig' runat='server' 
	              ClientIDMode='Static' Text='0'>
     </asp:TextBox> 
     </td>
   </tr>
   <tr>
      <td>Maximum:</td>
      <td>
      <asp:TextBox ID='updownmax' runat='server' 
	               ClientIDMode='Static' Text='1000'>
      </asp:TextBox> 
      </td>
   </tr>
   <tr>
      <td>Minimum:</td>
      <td>
      <asp:TextBox ID='updownmin' runat='server' 
	               ClientIDMode='Static' Text='-1000'>
      </asp:TextBox> 
      </td>
   </tr>
   <tr>
      <td>Step:</td>
      <td>
      <asp:TextBox ID='updownstep' runat='server' 
	               ClientIDMode='Static' Text='1'>
      </asp:TextBox> 
      </td>
   </tr>
   <tr>
      <td>Speed:</td>
      <td>
         <select id='updownspeed'>
            <option value='slow'>Slow</option>
            <option selected='selected' value='fast'>Fast</option>
         </select>
      </td>
   </tr>
   <tr>
      <td>Mouse Wheel:</td>
      <td>
         <input type='checkbox' id='updownmousewheel' checked='checked' />
      </td>
   </tr>
</table>
</div>
<hr />
<br />
    <asp:Button ID='ButtonSubmit' runat='server' Text='Submit' 
        onclick='ButtonSubmit_Click' /><br /><br />
    <asp:Label ID='LabelResult' runat='server' Text=''></asp:Label>
</asp:Content>


The ui.spinner.css file takes care of positioning the Up / Down buttons next to the text bix that they will apply to.

Note that in the body of the markup the text boxes can be either html input elements with type set equal to text or ASP.NET TextBox controls with the ClientIdMode set to static.

Whichever way you choose you can specify a starting numberic value as a string.

The “magic” happens in the jQuery code that you see above between lines 11 and 44.

I think the code’s functionality is pretty straight forward and looking at the code reveals many of the optional parameters.

Simplifying user input helps reduce data input errors!

You can download a working sample [ HERE ].