Number Input
 |
Any existing Text Input widgets with Number selected as Type will be automatically updated to a Number Input widget upon opening projects in Vuforia Studio 10.0 or later. This change does not affect widget bindings or appearance in Vuforia View.
|
What Does This Widget Do?
The Number Input widget is a one-line text box. It can be used for numeric data entry or to display numeric data in edit mode.
When Should I Use This Widget?
Use a Number Input when widget you want to include a one-line text box for an experience user to enter numeric data. For example, if you want a service technician to enter the liters of oil in a generator before they begin performing service maintenance, a Number Input widget would be most appropriate.
Are There Any Special Properties, Services, Events, or Actions?
To view a list of common widget properties, services, and events, see Common Widget Properties, Services, and Events.
The following table is a list of properties that are specific to this widget.
|
Property
|
JavaScript
|
Type
|
Description
|
|---|---|---|---|
|
Align
|
textalign
|
string
|
Select one of the following.
• Left
• Center
• Right
|
|
Label Position
|
type
|
string
|
Select one of the following.
• Placeholder—text box with only a placeholder attribute. Setting the label is ignored completely.
• Inline Label—label appears on the left and text input is to the right of it.
• Stacked Label— label appears at the top and the text input is below it.
• Floating Label— label appears at the top and the text input is below it.
|
|
Maximum
|
maxValue
|
number
|
Maximum acceptable value.
|
|
Minimum
|
minValue
|
number
|
Minimum acceptable value.
|
|
Number
|
number
|
number
|
User input value.
|
|
Step
|
stepValue
|
number
|
Specifies the increment each time the value is increased or decreased using the buttons.
|
The Widget in Action
Here’s an example of what your widget might look like!
|
Minimum Steps Required for Use
|
What It Looks Like
|
|---|---|
|
1. Drag and drop a Number Input widget onto the canvas.
2. Enter placeholder text in the Placeholder field if you want to give the user some direction as to what should be entered in the text area. For this field, we’ve entered (1-5) to let the user know the expectation of the range they should enter.
3. Select the Label Position. For this example, we’ve selected the Inline Label option for the Label Position property so we could include a label for the widget along with placeholder text. For this example, we entered Oil Level as the label.
4. Next, you can select a minimum and maximum for the number data entry. This will only allow users to select a number within a certain range. For this example, we selected 1 as the minimum, and 5 as the maximum.
5. Configure any other fields you see fit.
|
 |