TouchSpin (<b:touchSpin />)

TouchSpin is a component that enable to spin up or down values in a defined numeric range.

Basic usage

Example of basic usage of the component

Live preview

Event management

Here is an example of event management client-side

Live preview

Attribute Default value Description
accesskey (none) Access key to transfer focus to the input element.
ajax false Activates AJAX. The default value is false (no AJAX).
alt (none) Alternate textual description of the input element.
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
boostat 10 Boost at every nth step.
booster true If enabled, the the spinner is continually becoming faster as holding the button.
button-down-class
buttonDownClass (alternative writing)
btn btn-default Class(es) of down button.
button-up-class
buttonUpClass (alternative writing)
btn btn-default Class(es) of up button.
col-lg
colLg (alternative writing)
-1 Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-md
colMd (alternative writing)
-1 Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-sm
colSm (alternative writing)
-1 Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-xs
colXs (alternative writing)
-1 Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
converter (none) An EL expression or a literal text that defines a converter for the component. When it's an EL expression, it's resolved to a converter instance. In case it's a static text, it must refer to a converter id.
converter-message
converterMessage (alternative writing)
(none) Message to display when conversion fails.
decimals 0 Number of decimal points.
dir (none) Direction indication for text that does not inherit directionality. Legal values: ltr (Default. Left-to-right text direction), rtl (Right-to-left text direction) and auto (let the browser figure out the direction of your alphabet, based on the page content).
disabled false Disables the input element, default is false.
display block If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block.
field-id
fieldId (alternative writing)
(none) Unique id of the input field itself (as opposed to the id, which is belongs to the entire component, including the div surrounding the input field). Useful for frameworks like JAAS, which require you to use a specific field id.
field-size
fieldSize (alternative writing)
(none) The size of the input. Possible values are xs (extra small), sm (small), md (medium) and lg (large) .
force-step-divisibility
forceStepDivisibility (alternative writing)
round How to force the value to be divisible by step value: 'none' | 'round' | 'floor' | 'ceil'
hidden (none) This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs.
id (none) Unique identifier of the component in a namingContainer.
immediate false Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false.
initval Applied when no explicit value is set on the input with the value attribute. Empty string means that the value remains empty on initialization.
inline false Inline forms are more compact and put the label to the left hand side of the input field instead of putting it above the input field. Inline applies only to screens that are at least 768 pixels wide.
label (none) An optional label of the field. The label is only shown if you also set render-attribute='true'. The label is also used for error messages.
label-col-lg
labelColLg (alternative writing)
-1 Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
label-col-md
labelColMd (alternative writing)
-1 Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
label-col-sm
labelColSm (alternative writing)
-1 Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
label-col-xs
labelColXs (alternative writing)
-1 Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
label-large-screen
labelLargeScreen (alternative writing)
-1 Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
label-medium-screen
labelMediumScreen (alternative writing)
-1 Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
label-small-screen
labelSmallScreen (alternative writing)
-1 Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
label-style
labelStyle (alternative writing)
(none) The CSS inline style of the label.
label-style-class
labelStyleClass (alternative writing)
(none) The CSS class of the label.
label-tiny-screen
labelTinyScreen (alternative writing)
-1 Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
lang (none) Code describing the language used in the generated markup for this component.
large-screen
largeScreen (alternative writing)
-1 Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
max 100 Maximum value.
max-boosted-step
maxBoostedStep (alternative writing)
0 Maximum step when boosted.
maxlength 0 The maximum length of the input.
medium-screen
mediumScreen (alternative writing)
-1 Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
min 0 Minimum value.
mousewheel true Enables the mouse wheel to change the value of the input.
name (none) The name of the field in the HMTL form and the HTTP request. Useful for frameworks like JAAS, which require you to use a specific field name.
offset (none) Integer value to specify how many columns to offset.
offset-lg
offsetLg (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-md
offsetMd (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-sm
offsetSm (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-xs
offsetXs (alternative writing)
(none) Integer value to specify how many columns to offset.
onblur (none) Client side callback to execute when input element loses focus.
onchange (none) Client side callback to execute when the value is changed with one of the buttons (but not triggered when the spinner hits the limit set by min or max.
onclick (none) OnClick DHTML event .
oncomplete (none) JavaScript to be executed when ajax completes with success.
ondblclick (none) Client side callback to execute when input element is double clicked.
onfocus (none) Client side callback to execute when input element receives focus.
onkeydown (none) Client side callback to execute when a key is pressed down over input element.
onkeypress (none) Client side callback to execute when a key is pressed and released over input element.
onkeyup (none) Client side callback to execute when a key is released over input element.
onmousedown (none) Client side callback to execute when a pointer input element is pressed down over input element.
onmousemove (none) Client side callback to execute when a pointer input element is moved within input element.
onmouseout (none) Client side callback to execute when a pointer input element is moved away from input element.
onmouseover (none) Client side callback to execute when a pointer input element is moved onto input element.
onmouseup (none) Client side callback to execute when a pointer input element is released over input element.
onselect (none) Client side callback to execute when text within input element is selected by user.
onstartdownspin (none) Client side callback to execute when the spinner starts spinning downwards.
onstartspin (none) Client side callback to execute when the spinner starts spinning upwards or downwards.
onstartupspin (none) Client side callback to execute when the spinner starts spinning upwards.
onstopdownspin (none) Client side callback to execute when the spinner stops downspinning.
onstopspin (none) Client side callback to execute when the spinner stops spinning.
onstopupspin (none) Client side callback to execute when the spinner stops upspinning.
postfix (none) Extra class(es) for prefix.
postfix-extra-class
postfixExtraClass (alternative writing)
(none) Extra class(es) for postfix.
prefix (none) Text before the input.
prefix-extra-class
prefixExtraClass (alternative writing)
(none) Text after the input.
process (none) Comma or space separated list of ids or search expressions denoting which values are to be sent to the server.
readonly false Flag indicating that this input element will prevent changes by the user.
render-label
renderLabel (alternative writing)
net.bootsfaces.component.ComponentUtils.isRenderLabelDefault() Allows you to suppress automatic rendering of labels. Used internally by AngularFaces, too.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
required false Boolean value Require input in the component when the form is submitted.
required-message
requiredMessage (alternative writing)
(none) Message to show if the user did not specify a value and the attribute required is set to true.
size 0 Number of characters used to determine the width of the input element.
small-screen
smallScreen (alternative writing)
-1 Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
span (none) Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
step 1 Incremental/decremental step on up/down change.
step-interval
stepInterval (alternative writing)
100 Refresh rate of the spinner in milliseconds.
step-interval-delay
stepIntervalDelay (alternative writing)
500 Time in milliseconds before the spinner starts to spin.
style (none) Inline style of the input element.
style-class
styleClass (alternative writing)
(none) Style class of this element.
tabindex (none) Position of this element in the tabbing order for the current document. This value must be an integer between 0 and 32767.
tags false Show the words of the input text as tags (similar to price tags in the supermarket). You can select one or more tags. The list is sent to the backend bean as a comma-separated list.
tiny-screen
tinyScreen (alternative writing)
-1 Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
title (none) Advisory tooltip information.
tooltip (none) The text of the tooltip.
tooltip-container
tooltipContainer (alternative writing)
body Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body.
tooltip-delay
tooltipDelay (alternative writing)
0 The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-hide
tooltipDelayHide (alternative writing)
0 The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-show
tooltipDelayShow (alternative writing)
0 The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-position
tooltipPosition (alternative writing)
(none) Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom".
type (none) Type of the input. The default is text.
update (none) Component(s) to be updated with ajax.
validator (none) A method expression referring to a method validationg the input.
validator-message
validatorMessage (alternative writing)
(none) Message to display when validation fails.
value (none) Value.
value-change-listener
valueChangeListener (alternative writing)
(none) A method binding expression referring to a method for handling a valuechangeevent.
vertical-buttons
verticalButtons (alternative writing)
false Enables the traditional up/down buttons.
vertical-down-class
verticalDownClass (alternative writing)
glyphicon glyphicon-chevron-down Class of the down button with vertical buttons mode enabled.
vertical-up-class
verticalUpClass (alternative writing)
glyphicon glyphicon-chevron-up Class of the up button with vertical buttons mode enabled.
visible (none) This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.
  • Tell the world which CSS classes can be used to change the look of the component.