Semantic-ui: [UI] Spinbox Input

[kevinwarren]

Below is code that would work to get a number spinner working within Semantic UI. Spinner buttons can be given the usual colour classes too. CSS for smaller & bigger input tags would need to be added. Please add to Semantic. :-)

Code based on: http://exacttarget.github.io/fuelux/#spinner

Please see jsfiddle: http://jsfiddle.net/2c9qE/

Ps. I have no idea why but some padding in css is being ignored in jsfiddle making the spinner too wide.

[jlukic]

This is a good example, for now if you can accomplish it with fuel, i recommend using that.

We will be evaluating more opportunities to include new modules once we fully flesh out the existing road-mapped ones.

[geemang2000]

:+1:

[jlukic]

From #1703

Spinbox:

Similar to masked input in that it can only contain numbers and have 2 buttons for increment / decrement. Definable min and max values of course; ability to define a step value (could increment a time value by 15 minutes).

My favorite thing about most spinbox's ive seen is that it allows you to use your mouse wheel to scroll the value. Not a necessity but it's a pretty neat usability feature.

Examples
http://getfuelux.com/javascript.html#spinbox
http://jqueryui.com/spinner/#time

[larsbo]

:+1:

I updated @kevinwarren's fiddle to make it work with the current semantic ui version and made the markup a bit more semantic. The new version is here:
http://jsfiddle.net/cqkr7z1h/4/

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.