diff --git a/TODO b/TODO
new file mode 100644
index 0000000..6d2312a
--- /dev/null
+++ b/TODO
@@ -0,0 +1,6 @@
+# TODOs, semi-random sorting
+[ ] Implement glyph draw command
+[ ] Implement div.view and scrollbars
+[ ] Port font system from C to C3 (rewrite1)
+[ ] Update ARCHITECTURE.md
+[ ] Write a README.md
diff --git a/src/main.c3 b/src/main.c3
index 0d961d6..8f9bd51 100644
--- a/src/main.c3
+++ b/src/main.c3
@@ -65,7 +65,7 @@ fn int main(String[] args)
 			if (ctx.button("button2", ugui::Rect{0,0,30,30})!!.mouse_release) {
 				io::printn("release button2");
 			}
-			if (ctx.slider_hor("slider", ugui::Rect{0,0,100,30})!!.update) {
+			if (ctx.slider_ver("slider", ugui::Rect{0,0,30,100})!!.update) {
 				ugui::Elem* e = ctx.get_elem_by_label("slider")!!;
 				io::printfn("slider: %f", e.slider.value);
 			}
diff --git a/src/ugui_slider.c3 b/src/ugui_slider.c3
index 3fea39d..7984b2e 100644
--- a/src/ugui_slider.c3
+++ b/src/ugui_slider.c3
@@ -1,5 +1,10 @@
 module ugui;
 
+/*       handle
+ * +----+-----+---------------------+
+ * |    |#####|                     |
+ * +----+-----+---------------------+
+ */
 fn ElemEvents! Ctx.slider_hor(&ctx, String label, Rect size)
 {
     Id id = hash(label);
@@ -16,11 +21,6 @@ fn ElemEvents! Ctx.slider_hor(&ctx, String label, Rect size)
 	if (c_elem.flags.is_new || parent.flags.updated) {
 		// 2. Layout
 		c_elem.rect = ctx.position_element(parent, size, true);
-		/*       handle
-		 * +----+-----+---------------------+
-		 * |    |#####|                     |
-		 * +----+-----+---------------------+
-	     */
 		c_elem.slider.handle = Rect{
 			.x = (short)(c_elem.rect.x + (int)(c_elem.rect.w * c_elem.slider.value)),
 			.y = c_elem.rect.y,
@@ -64,3 +64,75 @@ fn ElemEvents! Ctx.slider_hor(&ctx, String label, Rect size)
 
 	return c_elem.events;
 }
+
+/*
+ * +-+
+ * | |
+ * | |
+ * +-+
+ * |#| handle
+ * |#|
+ * +-+
+ * | |
+ * | |
+ * +-+
+ */
+fn ElemEvents! Ctx.slider_ver(&ctx, String label, Rect size)
+{
+    Id id = hash(label);
+
+	Elem *parent = ctx.get_parent()!;
+	Elem *c_elem = ctx.get_elem(id)!;
+	// add it to the tree
+	ctx.tree.add(id, ctx.active_div)!;
+
+	// 1. Fill the element fields
+	c_elem.type = ETYPE_SLIDER;
+
+	// if the element is new or the parent was updated then redo layout
+	if (c_elem.flags.is_new || parent.flags.updated) {
+		// 2. Layout
+		c_elem.rect = ctx.position_element(parent, size, true);
+		c_elem.slider.handle = Rect{
+			.x = c_elem.rect.x,
+			.y = (short)(c_elem.rect.y + (int)(c_elem.rect.h * c_elem.slider.value)),
+			.w = c_elem.rect.w,
+			.h = (short)(c_elem.rect.h * 0.25),
+		};
+	}
+
+	c_elem.events = ctx.get_elem_events(c_elem);
+	if (parent.flags.has_focus && c_elem.events.mouse_hover) {
+	    if (point_in_rect(ctx.input.mouse.pos, c_elem.slider.handle) && c_elem.events.mouse_hold) {
+			short y = (short)clamp(ctx.input.mouse.pos.y - c_elem.slider.handle.h/2, c_elem.rect.y, c_elem.rect.y + c_elem.rect.h - c_elem.slider.handle.h);
+			float v = (float)(c_elem.slider.handle.y-c_elem.rect.y) / (float)(c_elem.rect.h-c_elem.slider.handle.h);
+			c_elem.slider.handle.y = y;
+			c_elem.slider.value = v;
+			c_elem.events.update = true;
+		}
+	}
+
+	// Draw the button
+	Color bg_color = uint_to_rgba(0x0000ffff);
+	Color handle_color = uint_to_rgba(0x0ff000ff);
+
+	Cmd cmd = {
+	    .type = CMD_RECT,
+	    .rect =	{
+		    .rect  = c_elem.rect,
+		    .color = bg_color,
+		},
+	};
+	ctx.cmd_queue.enqueue(&cmd)!;
+
+	cmd = Cmd{
+	    .type = CMD_RECT,
+	    .rect =	{
+		    .rect  = c_elem.slider.handle,
+		    .color = handle_color,
+		},
+	};
+	ctx.cmd_queue.enqueue(&cmd)!;
+
+	return c_elem.events;
+}