SpinBox QML Type | Qt Labs Controls 5.6

Qt 5.6 | Qt Labs Controls | QML Types | SpinBox QML Type

Qt 5.6.2 Reference Documentation

# SpinBox QML Type

A spinbox control. More...

Import Statement: | import Qt.labs.controls 1.0
Inherits: | Control

- List of all members, including inherited members

## Properties

- down
  - down.pressed : bool
  - down.indicator : Item
- from : int
- stepSize : int
- textFromValue : function
- to : int
- up
  - up.pressed : bool
  - up.indicator : Item
- validator : Validator
- value : int
- valueFromText : function

## Methods

- void decrease()
- void increase()

## Detailed Description

SpinBox allows the user to choose an integer value by clicking the up or down indicator buttons, by pressing up or down on the keyboard, or by entering a text value in the input field.

By default, SpinBox provides discrete values in the range of `[0-99]` with a stepSize of `1`.

      SpinBox {
          value: 50
      }

### Custom Values

Even though SpinBox works on integer values, it can be customized to accept arbitrary input values. The following snippet demonstrates how validator, textFromValue and valueFromText can be used to customize the default behavior.

      SpinBox {
          from: 0
          to: items.length - 1
          value: 1 // "Medium"

          property var items: ["Small", "Medium", "Large"]

          validator: RegExpValidator {
              regExp: new RegExp("(Small|Medium|Large)", "i")
          }

          textFromValue: function(value) {
              return items[value];
          }

          valueFromText: function(text) {
              for (var i = 0; i < items.length; ++i) {
                  if (items[i].toLowerCase().indexOf(text.toLowerCase()) === 0)
                      return i
              }
              return sb.value
          }
      }

Note: Types in the Qt.labs module are not guaranteed to remain compatible in future versions.

See also Tumbler and Customizing SpinBox.

## Property Documentation

down group
down.pressed : bool
down.indicator : Item

These properties hold the down indicator item and whether it is pressed.

See also decrease().

from : int

This property holds the starting value for the range. The default value is `0`.

See also to and value.

stepSize : int

This property holds the step size. The default value is `1`.

See also increase() and decrease().

textFromValue : function

This property holds a callback function that is called whenever an integer value needs to be converted to display text.

The callback function signature is `string function(value, locale)`. The function can have one or two arguments, where the first argument is the value to be converted, and the optional second argument is the locale that should be used for the conversion, if applicable.

The default implementation does the conversion using Number.toLocaleString():

      textFromValue: function(value, locale) { return Number(value).toLocaleString(locale, 'f', 0); }

See also valueFromText, validator, and locale.

to : int

This property holds the end value for the range. The default value is `99`.

See also from and value.

up group
up.pressed : bool
up.indicator : Item

These properties hold the up indicator item and whether it is pressed.

See also increase().

validator : Validator

This property holds the input text validator. By default, SpinBox uses IntValidator to accept input of integer numbers.

      validator: IntValidator {
          locale: control.locale.name
          bottom: Math.min(control.from, control.to)
          top: Math.max(control.from, control.to)
      }

See also textFromValue, valueFromText, and locale.

value : int

This property holds the value in the range `from` - `to`. The default value is `0`.

valueFromText : function

This property holds a callback function that is called whenever input text needs to be converted to an integer value.

The callback function signature is `int function(text, locale)`. The function can have one or two arguments, where the first argument is the text to be converted, and the optional second argument is the locale that should be used for the conversion, if applicable.

The default implementation does the conversion using Number.fromLocaleString():

      valueFromText: function(text, locale) { return Number.fromLocaleString(locale, text); }

See also textFromValue, validator, and locale.

## Method Documentation

void decrease()

Decreases the value by stepSize.

See also stepSize.

void increase()

Increases the value by stepSize.

See also stepSize.