diff --git a/knob.go b/knob.go
new file mode 100644
index 0000000..b2d5cf7
--- /dev/null
+++ b/knob.go
@@ -0,0 +1,118 @@
+package mujica
+
+import (
+	"cmp"
+	"fmt"
+	"log/slog"
+	"math"
+
+	"github.com/egoist/mygo/ui"
+
+	"mujicaui/internal"
+	"mujicaui/theme"
+)
+
+// KnobOptions configure a Knob. Min and Max both zero mean 0 to 100.
+type KnobOptions struct {
+	Min, Max float64
+	// Step snaps the value; zero is continuous, moving 1% per arrow press.
+	Step float64
+	// Ticks draws that many evenly spaced marks around the dial; zero draws none.
+	Ticks int
+	// Size is the dial diameter; zero is 56.
+	Size float32
+	// Format writes the value under the dial; nil prints as many decimals as Min and Step need.
+	Format   func(float64) string
+	Disabled bool
+	// Label names the knob and shows above it.
+	Label string
+}
+
+// knobSweep is the dial's travel, centered on twelve o'clock, in turns.
+const knobSweep = 0.75
+
+// knobDragPixels is how far a vertical drag travels the whole range.
+const knobDragPixels float32 = 160
+
+// Knob sets *value by dragging up and down, the arrows, Home and End; the dial shows the value and ticks.
+func Knob(c *ui.Context, value *float64, opts KnobOptions) ChoiceResult {
+	if value == nil {
+		panic("mujica: Knob needs a value")
+	}
+	if opts.Ticks < 0 || !(opts.Size >= 0) || math.IsInf(float64(opts.Size), 1) {
+		panic(fmt.Sprintf("mujica: Knob Ticks %d or Size %v invalid", opts.Ticks, opts.Size))
+	}
+	g, _ := sliderSetup(opts.Min, opts.Max, opts.Step, nil, false, c)
+	format := sliderFormat(opts.Format, g)
+	size := cmp.Or(opts.Size, 56)
+	k := Tokens(c)
+	old := g.snap(*value)
+	*value = old
+	col := ui.Column(c).AlignItems(ui.Center).Gap(Density(c).Unit()).Disabled(opts.Disabled)
+	disabled := col.IsDisabled()
+	var s *ui.Element
+	col.Children(func() {
+		if opts.Label != "" {
+			ui.Text(c, opts.Label).TextColor(k.Text).FontSize(FontSize(c, theme.CaptionSize))
+		}
+		var next float64
+		var dragged bool
+		s, next, dragged = sliderControl(c, old, g, g.lo, g.hi)
+		want := ui.Local(s, "knob.want", func() float64 { return math.NaN() })
+		if dragged {
+			if math.IsNaN(*want) {
+				*want = old
+			}
+			_, dy, _ := s.Dragged()
+			*want = max(g.lo, min(g.hi, *want-float64(dy)*(g.hi-g.lo)/float64(knobDragPixels)))
+			next = g.snap(*want)
+		} else {
+			*want = math.NaN()
+		}
+		if !disabled {
+			*value = next
+		}
+		s.Size(size, size).FocusRing(false).Cursor(ui.CursorResizeNS).Label(cmp.Or(opts.Label, msg(c, "knob.label")))
+		hot := s.Hovered() || dragged
+		v := *value
+		s.Draw(func(p *ui.Painter, r ui.Rect) { knobPaint(p, r, k, g, v, opts.Ticks, hot, s.FocusVisible()) })
+		ui.Text(c, format(*value)).TextColor(k.TextMuted).FontSize(FontSize(c, theme.CaptionSize)).FontFeatures("tnum")
+	})
+	changed := *value != old
+	if changed {
+		slog.Debug("mujica: knob changed", "label", opts.Label, "value", *value)
+	}
+	return ChoiceResult{col, changed}
+}
+
+// knobPaint draws the track arc, the value arc, ticks and the diamond pointer.
+func knobPaint(p *ui.Painter, r ui.Rect, k theme.Tokens, g sliderGeom, v float64, ticks int, hot, focus bool) {
+	cx, cy := internal.Snap(p, r.X+r.W/2), internal.Snap(p, r.Y+r.H/2)
+	rad := r.W/2 - 6
+	start := float32(-knobSweep / 2)
+	frac := float32((v - g.lo) / (g.hi - g.lo))
+	p.StrokePath(progressArc(p, cx, cy, rad, start, start+knobSweep), 3, k.Border)
+	if frac > 0 {
+		p.StrokePath(progressArc(p, cx, cy, rad, start, start+knobSweep*frac), 3, k.AccentText)
+	}
+	for i := range ticks {
+		t := float64(start) + knobSweep*float64(i)/float64(max(ticks-1, 1))
+		sin, cos := float32(math.Sin(2*math.Pi*t)), float32(math.Cos(2*math.Pi*t))
+		p.Line(cx+sin*(rad+3), cy-cos*(rad+3), cx+sin*(rad+6), cy-cos*(rad+6), 1, k.TextMuted)
+	}
+	face := k.Surface
+	if hot {
+		face = k.SurfaceHover
+	}
+	var dial ui.Path
+	dial.Circle(cx, cy, rad-6)
+	p.FillPath(&dial, face)
+	p.StrokePath(&dial, 1, k.ControlBorder)
+	t := float64(start + knobSweep*frac)
+	px := internal.Snap(p, cx+float32(math.Sin(2*math.Pi*t))*(rad-12))
+	py := internal.Snap(p, cy-float32(math.Cos(2*math.Pi*t))*(rad-12))
+	p.FillPath(internal.Diamond(px, py, 7), k.AccentText)
+	if focus {
+		internal.FocusRing(p, r, r.W/2, k.Focus)
+	}
+}
diff --git a/knob_test.go b/knob_test.go
new file mode 100644
index 0000000..79c3136
--- /dev/null
+++ b/knob_test.go
@@ -0,0 +1,98 @@
+package mujica
+
+import (
+	"testing"
+
+	"github.com/egoist/mygo/ui"
+)
+
+func knobTester(v *float64, opts *KnobOptions, n *int) *ui.Tester {
+	return ui.NewTester(func(c *ui.Context) {
+		Use(c, Settings{})
+		ui.Row(c).Padding(40).Children(func() {
+			if Knob(c, v, *opts).Changed() {
+				*n++
+			}
+		})
+	}, 300, 300)
+}
+
+func TestKnobKeysAndStepGrid(t *testing.T) {
+	v := 0.0
+	opts := KnobOptions{Max: 1, Step: 0.1, Label: "Gain"}
+	n := 0
+	tt := knobTester(&v, &opts, &n)
+	tt.Key(0, ui.KeyTab)
+	for range 3 {
+		tt.Key(0, ui.KeyUp)
+	}
+	if v != 0.3 || n != 3 || !tt.HasText("0.3") {
+		t.Fatalf("three Ups: %v (%d) %q", v, n, tt.Texts())
+	}
+	tt.Key(0, ui.KeyLeft)
+	if v != 0.2 {
+		t.Fatalf("Left: %v", v)
+	}
+	tt.Key(0, ui.KeyEnd)
+	if v != 1 {
+		t.Fatalf("End: %v", v)
+	}
+	tt.Key(0, ui.KeyUp)
+	if v != 1 || n != 5 {
+		t.Fatalf("past the end: %v %d", v, n)
+	}
+	tt.Key(0, ui.KeyHome)
+	if v != 0 {
+		t.Fatalf("Home: %v", v)
+	}
+}
+
+func TestKnobDragAndDisabled(t *testing.T) {
+	v := 50.0
+	opts := KnobOptions{Step: 1, Label: "Volume"}
+	n := 0
+	tt := knobTester(&v, &opts, &n)
+	// The dial's center: padding 40, caption and gap above it.
+	x, y := float32(68), float32(40+21+30)
+	tt.Press(x, y)
+	tt.Move(x, y-32) // a fifth of 160 DIPs: 20 of 100
+	tt.Release(x, y-32)
+	if v != 70 {
+		t.Fatalf("drag up 32 DIPs: %v", v)
+	}
+	opts.Disabled = true
+	tt.Frame()
+	tt.Press(x, y)
+	tt.Move(x, y-32)
+	tt.Release(x, y-32)
+	tt.Key(0, ui.KeyTab)
+	tt.Key(0, ui.KeyUp)
+	if v != 70 {
+		t.Fatalf("disabled knob moved: %v", v)
+	}
+}
+
+func TestKnobRejects(t *testing.T) {
+	v := 0.0
+	for name, o := range map[string]KnobOptions{"ticks": {Ticks: -1}, "size": {Size: -1}, "range": {Min: 5, Max: 1}} {
+		func() {
+			defer func() {
+				if recover() == nil {
+					t.Errorf("%s: no panic", name)
+				}
+			}()
+			ui.NewTester(func(c *ui.Context) { Use(c, Settings{}); Knob(c, &v, o) }, 200, 200)
+		}()
+	}
+}
+
+func TestKnobSnapshot(t *testing.T) {
+	a, b, d := 35.0, 0.8, 10.0
+	snapshot(t, "knob", 320, 130, func(c *ui.Context) {
+		ui.Row(c).Padding(16).Gap(24).Children(func() {
+			Knob(c, &a, KnobOptions{Label: "Gain", Ticks: 11})
+			Knob(c, &b, KnobOptions{Max: 1, Step: 0.1, Label: "Mix", Size: 72})
+			Knob(c, &d, KnobOptions{Label: "Off", Disabled: true})
+		})
+	})
+}
diff --git a/messages_essentials.go b/messages_essentials.go
index fa7fc68..f4a4f68 100644
--- a/messages_essentials.go
+++ b/messages_essentials.go
@@ -16,6 +16,8 @@ func init() {
 
 		"color_palette.custom": {"Custom color", "自定义颜色"},
 
+		"knob.label": {"Knob", "旋钮"},
+
 		"qr_code.label":    {"QR code", "二维码"},
 		"qr_code.too_long": {"Text too long for a QR code", "文字过长，无法生成二维码"},
 	})
diff --git a/testdata/snapshots/darwin/knob-dark.png b/testdata/snapshots/darwin/knob-dark.png
new file mode 100644
index 0000000..6ab48fb
Binary files /dev/null and b/testdata/snapshots/darwin/knob-dark.png differ
diff --git a/testdata/snapshots/darwin/knob-light.png b/testdata/snapshots/darwin/knob-light.png
new file mode 100644
index 0000000..c8a6952
Binary files /dev/null and b/testdata/snapshots/darwin/knob-light.png differ
diff --git a/testdata/snapshots/darwin/vertical_slider-dark.png b/testdata/snapshots/darwin/vertical_slider-dark.png
new file mode 100644
index 0000000..be3302a
Binary files /dev/null and b/testdata/snapshots/darwin/vertical_slider-dark.png differ
diff --git a/testdata/snapshots/darwin/vertical_slider-light.png b/testdata/snapshots/darwin/vertical_slider-light.png
new file mode 100644
index 0000000..98cab76
Binary files /dev/null and b/testdata/snapshots/darwin/vertical_slider-light.png differ
diff --git a/vertical_slider.go b/vertical_slider.go
new file mode 100644
index 0000000..7e25cb9
--- /dev/null
+++ b/vertical_slider.go
@@ -0,0 +1,98 @@
+package mujica
+
+import (
+	"cmp"
+	"log/slog"
+	"math"
+
+	"github.com/egoist/mygo/ui"
+
+	"mujicaui/theme"
+)
+
+// VerticalSliderOptions configure a VerticalSlider. Min and Max both zero mean 0 to 100.
+type VerticalSliderOptions struct {
+	Min, Max float64
+	// Step snaps the value; zero is continuous.
+	Step  float64
+	Marks []SliderMark
+	// Height is the track length; zero is 160.
+	Height float32
+	// ShowValue shows the value beside the thumb while hovered, dragged or focused.
+	ShowValue bool
+	Format    func(float64) string
+	Disabled  bool
+	Label     string
+}
+
+// VerticalSlider is a Slider standing up: max at the top, Up and Right raise it.
+func VerticalSlider(c *ui.Context, value *float64, opts VerticalSliderOptions) ChoiceResult {
+	if value == nil {
+		panic("mujica: VerticalSlider needs a value")
+	}
+	if !(opts.Height >= 0) || math.IsInf(float64(opts.Height), 1) {
+		panic("mujica: VerticalSlider Height must be finite and >= 0")
+	}
+	g, _ := sliderSetup(opts.Min, opts.Max, opts.Step, opts.Marks, false, c)
+	format := sliderFormat(opts.Format, g)
+	k := Tokens(c)
+	size := FontSize(c, theme.CaptionSize)
+	h := cmp.Or(opts.Height, 160)
+	old := g.snap(*value)
+	*value = old
+	var s *ui.Element
+	var next float64
+	var held bool
+	wrap := ui.Column(c).Disabled(opts.Disabled)
+	wrap.Children(func() { s, next, held = sliderControl(c, old, g, g.lo, g.hi) })
+	// The base maps the pointer across; here the height decides.
+	y := func(r ui.Rect, v float64) float32 {
+		return r.Y + r.H - sliderThumb/2 - (r.H-sliderThumb)*float32((v-g.lo)/(g.hi-g.lo))
+	}
+	if held {
+		if _, py, _ := s.PointerPosition(); s.Bounds().H > sliderThumb {
+			f := 1 - float64((py-sliderThumb/2)/(s.Bounds().H-sliderThumb))
+			next = g.snap(g.lo + max(0, min(1, f))*(g.hi-g.lo))
+		}
+	}
+	w := Density(c).ControlHeight()
+	for _, m := range opts.Marks {
+		if m.Label != "" {
+			w += 40
+			break
+		}
+	}
+	s.Size(w, h).PaddingY(sliderThumb / 2).FocusRing(false).Cursor(ui.CursorPointer)
+	if opts.Label != "" {
+		s.Label(opts.Label)
+	}
+	if !wrap.IsDisabled() {
+		*value = next
+	}
+	changed := *value != old
+	if changed {
+		slog.Debug("mujica: vertical_slider changed", "label", opts.Label, "value", *value)
+	}
+	hot := s.Hovered() || held
+	v := *value
+	s.Draw(func(p *ui.Painter, r ui.Rect) {
+		x := r.X + Density(c).ControlHeight()/2
+		top, bot := y(r, g.hi), y(r, g.lo)
+		p.Fill(ui.Rect{X: x - sliderTrack/2, Y: top, W: sliderTrack, H: bot - top}, k.Border, 0)
+		p.Stroke(ui.Rect{X: x - sliderTrack/2, Y: top, W: sliderTrack, H: bot - top}, k.ControlBorder, 0, 1)
+		p.Fill(ui.Rect{X: x - sliderTrack/2, Y: y(r, v), W: sliderTrack, H: bot - y(r, v)}, k.AccentText, 0)
+		for _, m := range opts.Marks {
+			my := y(r, m.Value)
+			p.Fill(ui.Rect{X: x + sliderTrack/2 + 2, Y: my - 0.5, W: 5, H: 1}, k.TextMuted, 0)
+			if m.Label != "" {
+				_, th := p.MeasureText(1000, ui.Span{Text: m.Label, Size: size})
+				p.Text(x+sliderTrack/2+10, my-th/2, m.Label, size, k.TextMuted)
+			}
+		}
+		sliderThumbPaint(p, k, x, y(r, v), hot, s.FocusVisible())
+		if opts.ShowValue && (hot || s.Focused()) {
+			sliderBubblePaint(p, k, x, y(r, v), format(v), size)
+		}
+	})
+	return ChoiceResult{wrap, changed}
+}
diff --git a/vertical_slider_test.go b/vertical_slider_test.go
new file mode 100644
index 0000000..45d0347
--- /dev/null
+++ b/vertical_slider_test.go
@@ -0,0 +1,83 @@
+package mujica
+
+import (
+	"testing"
+
+	"github.com/egoist/mygo/ui"
+)
+
+func verticalTester(v *float64, opts *VerticalSliderOptions, n *int) *ui.Tester {
+	return ui.NewTester(func(c *ui.Context) {
+		Use(c, Settings{})
+		ui.Row(c).Padding(20).Children(func() {
+			if VerticalSlider(c, v, *opts).Changed() {
+				*n++
+			}
+		})
+	}, 300, 300)
+}
+
+func TestVerticalSliderKeysAndPointer(t *testing.T) {
+	v := 0.0
+	opts := VerticalSliderOptions{Step: 10, Label: "Level", Height: 216}
+	n := 0
+	tt := verticalTester(&v, &opts, &n)
+	tt.Key(0, ui.KeyTab)
+	tt.Key(0, ui.KeyUp)
+	tt.Key(0, ui.KeyRight)
+	if v != 20 || n != 2 {
+		t.Fatalf("Up, Right: %v %d", v, n)
+	}
+	tt.Key(0, ui.KeyDown)
+	if v != 10 {
+		t.Fatalf("Down: %v", v)
+	}
+	tt.Key(0, ui.KeyEnd)
+	if v != 100 {
+		t.Fatalf("End: %v", v)
+	}
+	r, _ := tt.Find("Level")
+	// Track runs from y+8 (100) to y+208 (0): a quarter up is 25, snapped to 30 or 20.
+	tt.Press(r.X+r.W/2, r.Y+8+150)
+	tt.Release(r.X+r.W/2, r.Y+8+150)
+	if v != 30 && v != 20 {
+		t.Fatalf("press at a quarter height: %v", v)
+	}
+	tt.Press(r.X+r.W/2, r.Y+8+150)
+	tt.Move(r.X+r.W/2, r.Y)
+	tt.Release(r.X+r.W/2, r.Y)
+	if v != 100 {
+		t.Fatalf("drag to the top: %v", v)
+	}
+	opts.Disabled = true
+	tt.Frame()
+	tt.Press(r.X+r.W/2, r.Y+200)
+	tt.Release(r.X+r.W/2, r.Y+200)
+	if v != 100 {
+		t.Fatalf("disabled slider moved: %v", v)
+	}
+}
+
+func TestVerticalSliderRejects(t *testing.T) {
+	v := 0.0
+	for name, o := range map[string]VerticalSliderOptions{"height": {Height: -1}, "step": {Step: -1}} {
+		func() {
+			defer func() {
+				if recover() == nil {
+					t.Errorf("%s: no panic", name)
+				}
+			}()
+			ui.NewTester(func(c *ui.Context) { Use(c, Settings{}); VerticalSlider(c, &v, o) }, 200, 200)
+		}()
+	}
+}
+
+func TestVerticalSliderSnapshot(t *testing.T) {
+	a, b := 40.0, 70.0
+	snapshot(t, "vertical_slider", 260, 220, func(c *ui.Context) {
+		ui.Row(c).Padding(16).Gap(24).Children(func() {
+			VerticalSlider(c, &a, VerticalSliderOptions{Marks: []SliderMark{{Value: 0, Label: "0"}, {Value: 50, Label: "50"}, {Value: 100, Label: "100"}}})
+			VerticalSlider(c, &b, VerticalSliderOptions{Disabled: true})
+		})
+	})
+}