Object Hierarchy:

Gtk.SpinButton Gtk.SpinButton Gtk.SpinButton Gtk.Entry Gtk.Entry Gtk.Entry->Gtk.SpinButton Gtk.Widget Gtk.Widget Gtk.Widget->Gtk.Entry GLib.InitiallyUnowned GLib.InitiallyUnowned GLib.InitiallyUnowned->Gtk.Widget GLib.Object GLib.Object GLib.Object->GLib.InitiallyUnowned Atk.Implementor Atk.Implementor Atk.Implementor->Gtk.SpinButton Atk.Implementor->Gtk.Entry Atk.Implementor->Gtk.Widget Gtk.Buildable Gtk.Buildable Gtk.Buildable->Gtk.SpinButton Gtk.Buildable->Gtk.Entry Gtk.Buildable->Gtk.Widget Gtk.CellEditable Gtk.CellEditable Gtk.CellEditable->Gtk.SpinButton Gtk.CellEditable->Gtk.Entry Gtk.Editable Gtk.Editable Gtk.Editable->Gtk.SpinButton Gtk.Editable->Gtk.Entry Gtk.Orientable Gtk.Orientable Gtk.Orientable->Gtk.SpinButton


[ CCode ( type_id = "gtk_spin_button_get_type ()" ) ]
public class SpinButton : Entry, Implementor, Buildable, CellEditable, Editable, Orientable

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

Rather than having to directly type a number into a Entry, GtkSpinButton 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 GtkSpinButton are through an adjustment. See the Adjustment section for more details about an adjustment's properties. Note that GtkSpinButton will by default make its entry large enough to accomodate the lower and upper bounds of the adjustment, which can lead to surprising results. Best practice is to set both the width_chars and max_width_chars poperties to the desired number of characters to display in the entry.

CSS nodes

├── undershoot.left
├── undershoot.right
├── entry
│ ╰── ...
├── button.down
╰── button.up
on.vertical ├── undershoot.left ├── undershoot.right ├── button.up ├── entry │ ╰── ... ╰── button.down ]|

GtkSpinButtons 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 GtkEntry subnodes (if present) are put below the entry node. The orientation of the spin button is reflected in the .vertical or .horizontal style class on the main node.

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.

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

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 (GTK_WINDOW_TOPLEVEL);
gtk_container_set_border_width (GTK_CONTAINER (window), 5);

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

gtk_widget_show_all (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.

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

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 (GTK_WINDOW_TOPLEVEL);
gtk_container_set_border_width (GTK_CONTAINER (window), 5);

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

gtk_widget_show_all (window);


Example: SpinButton:

public class Application : Gtk.Window {
public Application () {
// Prepare Gtk.Window:
this.title = "My Gtk.SpinButton";
this.window_position = Gtk.WindowPosition.CENTER;
this.destroy.connect (Gtk.main_quit);

// The button:
Gtk.SpinButton button = new Gtk.SpinButton.with_range (0, 10, 1);
this.add (button);

// Catch changes:
button.value_changed.connect (() => {
int val = button.get_value_as_int ();
print ("%d\n", val);

public static int main (string[] args) {
Gtk.init (ref args);

Application app = new Application ();
app.show_all ();
Gtk.main ();
return 0;

valac --pkg gtk+-3.0 Gtk.SpinButton.vala

Namespace: Gtk
Package: gtk+-3.0



Creation methods:



Inherited Members:

All known members inherited from class Gtk.Entry
All known members inherited from class Gtk.Widget
All known members inherited from interface Atk.Implementor
All known members inherited from interface Gtk.CellEditable
All known members inherited from interface Gtk.Orientable