Customized Jquery UI spinner

you can try with:

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

Is easy to use and you only need 2 files (ui.spinner.min.js or ui.spinner.js and ui.spinner.css)

Answering to your questions:

1. You can override any of the css classes listed below to put your desired image, and play with some values in the browser development tool to see your changes.

       classes: ui-spinner-up ui-spinner-button ui-state-default ui-corner-tr
   

2. The increment size could be set in the 'step' property.

Example:

$('#someId').spinner({
                        min: 0,
                        max: 100,
                        increment:'fast',
                        step:5  // this will increment or decrement by 5    
                    });

Remember that the HTML component with id="someId" should be an input with type="text" or "number" but if you choose the last one and your browser support HTML5 it will render the up/down arrow inside the input and below the buttons added by this extension. My suggestion is to use type="text".

Cheers.

If you look at the latest version in github for spinner, https://github.com/jquery/jquery-ui/tree/master/ui They have added code in the last commit for spinner to have option to change images. As far as increment step size is concerned you can add the step value in options. Hope this helps.

I forgot mention that you can use jQuery UI 1.9, in the milestone 6 they were featuring many updates for the Spinner widget.

Please visit this site for further details: JQuery UI 1.9 milestone 6

Remember that this feature is 'in development', the visual design looks good but the working spinner looks like this example

For your purposes:

1. The images could be changed by CSS.
2. The option 'step' should provide the increment step size.
3. Till mousedown on image keep incrementing textbox is working as you expect.

Note: Remember that you can download the first release candidate of JQuery UI 1.9 RC, to test that.

I hope this helps.