diff --git a/src/Library/demos/Scale/main.blp b/src/Library/demos/Scale/main.blp
new file mode 100644
index 000000000..87ffdf8ff
--- /dev/null
+++ b/src/Library/demos/Scale/main.blp
@@ -0,0 +1,61 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: "Scale";
+  description: _("Slider control to select a value from a range");
+
+  Box {
+    orientation: vertical;
+    halign: center;
+
+    Box{
+      halign: center;
+
+      Scale one {
+        orientation: horizontal;
+        margin-bottom: 18;
+        width-request: 130;
+        draw-value: true;
+        margin-end: 36;
+        adjustment: Gtk.Adjustment {
+          lower: 0;
+          upper: 100;
+          value: 0;
+        };
+      }
+
+      Scale two {
+        orientation: vertical;
+        margin-bottom: 18;
+        height-request: 140;
+        adjustment: Gtk.Adjustment {
+          lower: 0;
+          upper: 100;
+          value: 0;
+        };
+      }
+    }
+    Scale disabled {
+      orientation: horizontal;
+      sensitive: false;
+      margin-bottom: 18;
+      show-fill-level: true;
+      adjustment: Gtk.Adjustment {
+        lower: 0;
+        upper: 50;
+        value: 25;
+      };
+    }
+
+    LinkButton {
+      label: "API Reference";
+      uri: "https://docs.gtk.org/gtk4/class.Scale.html";
+    }
+
+    LinkButton {
+      label: "Human Interface Guidelines";
+      uri: "https://developer.gnome.org/hig/patterns/controls/sliders.html";
+    }
+  }
+}
diff --git a/src/Library/demos/Scale/main.js b/src/Library/demos/Scale/main.js
new file mode 100644
index 000000000..1079b0c86
--- /dev/null
+++ b/src/Library/demos/Scale/main.js
@@ -0,0 +1,32 @@
+import Gtk from "gi://Gtk";
+
+const scale_one = workbench.builder.get_object("one");
+const scale_two = workbench.builder.get_object("two");
+
+const marks = {
+  0: "A",
+  50: "B",
+  100: "C",
+};
+
+for (const [value, label] of Object.entries(marks)) {
+  scale_two.add_mark(value, Gtk.PositionType.RIGHT, label);
+}
+scale_two.set_increments(25, 100);
+
+scale_one.connect("value-changed", () => {
+  const scale_value = scale_one.get_value();
+  if (scale_value === scale_one.adjustment.upper) {
+    console.log("Maximum value reached");
+  } else if (scale_value === scale_one.adjustment.lower) {
+    console.log("Minimum value reached");
+  }
+});
+
+scale_two.connect("value-changed", () => {
+  const scale_value = scale_two.get_value();
+  const label = marks[scale_value];
+  if (!label) return;
+
+  console.log(`Mark ${label} reached`);
+});
diff --git a/src/Library/demos/Scale/main.json b/src/Library/demos/Scale/main.json
new file mode 100644
index 000000000..ff9cb9ca9
--- /dev/null
+++ b/src/Library/demos/Scale/main.json
@@ -0,0 +1,10 @@
+{
+  "name": "Scale",
+  "category": "user_interface",
+  "description": "Slider control to select a value from a range",
+  "panels": [
+    "ui",
+    "preview"
+  ],
+  "autorun": true
+}