6. Numeric Widgets

Qt offers several widgets designed for numeric input:

• QSpinBox - integer values
• QDoubleSpinBox - floating-point (decimal) values
• QSlider - linear selection with a sliding handle
• QDial - selection with a circular dial

These widgets form two distinct inheritance trees. QDoubleSpinBox and QSpinBox are inherited from QAbstractSpinBox

While QSlider and QDial are inherited from QAbstractSlider:

All of them are bounded (they have configurable minimum and maximum values) and emit the valueChanged() when the user modifies the value.

A QSpinBox allows the user select an integer either by clicking the up/down arrows, pressing the keyboard arrows or typing directly.

To do this:

1. Create the QSpinBox instance and configure it. The default spinbox range is 0-99, but in this example we restrict it to realistic RAM sizes (16-256 GB), set the step size 2 GB, the initial value to 32 GB, and append the unit with setSuffix(' GB').

2. Define a slot that receives the new value and decorate it with @Slot(int). The slot name is set_ram() and it sets a label’s text to the spinbox value.

3. Connect the valueChanged signal to the slot. The slot receives the spinbox value as its argument.

The application looks like this:

QDoubleSpinBox lets the user select a floating-point (float) value. In this example we use it to control the opacity of another widget (a green label).

To do this:

1. Create the spinbox and configure its properties. We limit the range to 0.0-1.0, and choose a single step of 0.05.

2. Create a slot to react to the valueChanged() signal. The slot change_opacity() receives the new value as a float. We appl it to QGraphicsOpacityEffect attached to the target widget. The effect’s setOpacity() method accepts values between 0.0 (fully transparent) and 1.0 (fully opaque).

3. Connect the signal to the slot.

QSlider provides a vertical or horizontal slider that lets the user select an integer value by dragging a handle. Its main signals are:

To do this:

1. Create and configure the slider. Set the range with setRange(min, max) In this example we use 0-255 because we want to control the alpha channel of a color in a stylesheet (rgba(0, 128, 0, alpha)). We start at 255 (fully opaque) and make the slider horizontal.

2. Create a slot to react to value changes. The slot receives an int. Here qe dynamically update a QLabels stylesheet, inserting the slider value as the alpha component of an rgba() color.

3. Connect the signal to the slot.

The QDial class provides a rounded range control. Unlike the QSlider, which is linear, QDial lets the user “turn” a value by dragging around a circular widget.

To do this:

1. Create and configure the dial.

2. Create a slot to respond to the dial value changes.

3. Connect the signal to the slot.

In the example, turning the QDial updates a QProgressBar in real time.