A GtkScale is a slider control used to select a numeric value.

To use it, you’ll probably want to investigate the methods on its base class, Range, in addition to the methods for GtkScale itself. To set the value of a scale, you would normally use set_value. To detect changes to the value, you would normally use the value_changed signal.

Note that using the same upper and lower bounds for the Scale (through the Range methods) will hide the slider itself. This is useful for applications that want to show an undeterminate value on the scale, without changing the layout of the application (such as movie or music players).

GtkScale as GtkBuildable

GtkScale supports a custom `<marks>` element, which can contain multiple `<mark>` elements. The “value” and “position” attributes have the same meaning as add_mark parameters of the same name. If the element is not empty, its content is taken as the markup to show at the mark. It can be translated with the usual ”translatable” and “context” attributes.

CSS nodes

scale[.fine-tune][.marks-before][.marks-after]
├── marks.top
│   ├── mark
│   ┊    ├── [label]
│   ┊    ╰── indicator
┊   ┊
│   ╰── mark
├── [value]
├── contents
│   ╰── trough
│       ├── slider
│       ├── [highlight]
│       ╰── [fill]
╰── marks.bottom
    ├── mark
    ┊    ├── indicator
    ┊    ╰── [label]
    ╰── mark

ain node gets the style class .fine-tune added when the scale is in 'fine-tuning' mode.

If the scale has an origin (see set_has_origin), there is a subnode with name highlight below the trough node that is used for rendering the highlighted part of the trough.

If the scale is showing a fill level (see set_show_fill_level), there is a subnode with name fill below the trough node that is used for rendering the filled in part of the trough.

If marks are present, there is a marks subnode before or after the contents node, below which each mark gets a node with name mark. The marks nodes get either the .top or .bottom style class.

The mark node has a subnode named indicator. If the mark has text, it also has a subnode named label. When the mark is either above or left of the scale, the label subnode is the first when present. Otherwise, the indicator subnode is the first.

The main CSS node gets the 'marks-before' and/or 'marks-after' style classes added depending on what marks are present.

If the scale is displaying the value (see draw_value), there is subnode with name value.

Example: Scale:

public class Application : Gtk.Window {
	public Application () {
		// Prepare Gtk.Window:
		this.title = "My Gtk.Scale";
		this.window_position = Gtk.WindowPosition.CENTER;
		this.destroy.connect (Gtk.main_quit);
		this.set_default_size (350, -1);

		// The button:
		Gtk.Scale scale = new Gtk.Scale.with_range (Gtk.Orientation.HORIZONTAL, 0, 1, 0.1);
		this.add (scale);

		// Catch changes:
		scale.value_changed.connect (() => {
			print ("%f\n", scale.get_value ());
		});
	}

	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.Scale.vala