From a4d1016323c47edd259a4f65873518667aef3b12 Mon Sep 17 00:00:00 2001
From: Gareth Bowen <gareth@bowenwebdesign.co.nz>
Date: Thu, 7 May 2026 10:29:15 +1200
Subject: [PATCH] fix(#799): flips min and max labels to match the selected
 value

---
 .changeset/chilly-mice-admire.md                       |  5 +++++
 .../components/form-elements/range/RangeControl.vue    | 10 +++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/chilly-mice-admire.md

diff --git a/.changeset/chilly-mice-admire.md b/.changeset/chilly-mice-admire.md
new file mode 100644
index 000000000..67f71c55c
--- /dev/null
+++ b/.changeset/chilly-mice-admire.md
@@ -0,0 +1,5 @@
+---
+'@getodk/web-forms': patch
+---
+
+Fixed vertical range control to record the correct value
diff --git a/packages/web-forms/src/components/form-elements/range/RangeControl.vue b/packages/web-forms/src/components/form-elements/range/RangeControl.vue
index 0974b5824..efa10e366 100644
--- a/packages/web-forms/src/components/form-elements/range/RangeControl.vue
+++ b/packages/web-forms/src/components/form-elements/range/RangeControl.vue
@@ -59,9 +59,6 @@ const orientation = props.node.appearances.vertical ? 'vertical' : 'horizontal';
 			<div class="range-value">
 				<span>{{ numberValue }}</span>
 			</div>
-			<div class="range-bound range-min">
-				{{ start }}
-			</div>
 			<RangeSlider
 				:id="node.nodeId"
 				:disabled="node.currentState.readonly"
@@ -72,6 +69,9 @@ const orientation = props.node.appearances.vertical ? 'vertical' : 'horizontal';
 				:model-value="numberValue"
 				@update:model-value="setValue"
 			/>
+			<div class="range-bound range-min">
+				{{ start }}
+			</div>
 			<div class="range-bound range-max">
 				{{ end }}
 			</div>
@@ -164,11 +164,11 @@ const orientation = props.node.appearances.vertical ? 'vertical' : 'horizontal';
 		}
 
 		.range-min {
-			top: 0;
+			bottom: 0;
 		}
 
 		.range-max {
-			bottom: 0;
+			top: 0;
 		}
 
 		.range-value {