A [gtk.spin_button.SpinButton] is an ideal way to allow the user to set the value of some attribute.

!An example GtkSpinButton

Rather than having to directly type a number into a [gtk.entry.Entry], [gtk.spin_button.SpinButton] allows the user to click on one of two arrows to increment or decrement the displayed value. A value can still be typed in, with the bonus that it can be checked to ensure it is in a given range.

The main properties of a [gtk.spin_button.SpinButton] are through an adjustment. See the [gtk.adjustment.Adjustment] documentation for more details about an adjustment's properties.

Note that [gtk.spin_button.SpinButton] will by default make its entry large enough to accommodate the lower and upper bounds of the adjustment. If this is not desired, the automatic sizing can be turned off by explicitly setting property@Gtk.Editable:width-chars to a value != -1.

Using a GtkSpinButton to get an integer

// Provides a function to retrieve an integer value from a GtkSpinButton
// and creates a spin button to model percentage values.

int
grab_int_value (GtkSpinButton *button,
               gpointer       user_data)
{
 return gtk_spin_button_get_value_as_int (button);
}

void
create_integer_spin_button (void)
{

 GtkWidget *window, *button;
 GtkAdjustment *adjustment;

 adjustment = gtk_adjustment_new (50.0, 0.0, 100.0, 1.0, 5.0, 0.0);

 window = gtk_window_new ();

 // creates the spinbutton, with no decimal places
 button = gtk_spin_button_new (adjustment, 1.0, 0);
 gtk_window_set_child (GTK_WINDOW (window), button);

 gtk_window_present (GTK_WINDOW (window));
}

Using a GtkSpinButton to get a floating point value

// Provides a function to retrieve a floating point value from a
// GtkSpinButton, and creates a high precision spin button.

float
grab_float_value (GtkSpinButton *button,
                 gpointer       user_data)
{
 return gtk_spin_button_get_value (button);
}

void
create_floating_spin_button (void)
{
 GtkWidget *window, *button;
 GtkAdjustment *adjustment;

 adjustment = gtk_adjustment_new (2.500, 0.0, 5.0, 0.001, 0.1, 0.0);

 window = gtk_window_new ();

 // creates the spinbutton, with three decimal places
 button = gtk_spin_button_new (adjustment, 0.001, 3);
 gtk_window_set_child (GTK_WINDOW (window), button);

 gtk_window_present (GTK_WINDOW (window));
}

CSS nodes

spinbutton.horizontal
├── text
│    ├── undershoot.left
│    ╰── undershoot.right
├── button.down
╰── button.up

spinbutton.vertical
├── button.up
├── text
│    ├── undershoot.left
│    ╰── undershoot.right
╰── button.down

[gtk.spin_button.SpinButton]s main CSS node has the name spinbutton. It creates subnodes for the entry and the two buttons, with these names. The button nodes have the style classes .up and .down. The [gtk.text.Text] subnodes (if present) are put below the text node. The orientation of the spin button is reflected in the .vertical or .horizontal style class on the main node.

Accessibility

[gtk.spin_button.SpinButton] uses the [gtk.types.AccessibleRole.SpinButton] role.

Fluent builder for [gtk.spin_button.SpinButton]