From bba5a134d780c7812a25798a42ec88f9839d1fb2 Mon Sep 17 00:00:00 2001
From: Gareth Bowen <gareth@bowenwebdesign.co.nz>
Date: Tue, 5 May 2026 16:51:49 +1200
Subject: [PATCH 1/4] feat(#714): show selected value on range questions

---
 .../form-elements/range/RangeControl.vue      | 43 ++++++++++++++-----
 1 file changed, 33 insertions(+), 10 deletions(-)

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 7c6c02a27..146125f47 100644
--- a/packages/web-forms/src/components/form-elements/range/RangeControl.vue
+++ b/packages/web-forms/src/components/form-elements/range/RangeControl.vue
@@ -59,6 +59,9 @@ const orientation = props.node.appearances.vertical ? 'vertical' : 'horizontal';
 			<div class="range-bound range-min">
 				{{ start }}
 			</div>
+			<div class="range-value">
+				{{ numberValue }}
+			</div>
 			<RangeSlider
 				:id="node.nodeId"
 				:disabled="node.currentState.readonly"
@@ -88,10 +91,6 @@ const orientation = props.node.appearances.vertical ? 'vertical' : 'horizontal';
 //   non-trivial to integrate with PrimeVue's styling. I backed out due to the
 //   complexity.
 //
-// - There is no way to indicate the present value. The official MUI (React)
-//   component does this with a tooltip which shows when hovering the "thumb"
-//   control.
-//
 // - Should we flip either of the following in RTL languages?
 //
 //    - Horizontal direction of the control
@@ -118,26 +117,41 @@ const orientation = props.node.appearances.vertical ? 'vertical' : 'horizontal';
 		line-height: 1;
 	}
 
+	:deep(.p-slider-handle) {
+		anchor-name: --current-value;
+	}
+
+	.range-value {
+		position: absolute;
+		position-anchor: --current-value;
+	}
+
 	&.horizontal {
 		height: var(--track-size);
-		padding: 0 0.5rem 2lh 0.5rem;
+		padding: 2lh 0.5rem 2lh 0.5rem;
 
 		.range-bound {
 			bottom: 0;
 		}
 
 		.range-min {
-			left: 0;
+			left: 1px;
 		}
 
 		.range-max {
-			right: 0;
+			right: 4px;
+		}
+
+		.range-value {
+			justify-self: anchor-center;
+			bottom: anchor(top);
+			margin-bottom: 0.25rem;
 		}
 	}
 
 	&.vertical {
 		width: var(--track-size);
-		padding: 0.5lh 3rem 0.5lh;
+		padding: 0.5lh 2lh 0.5lh;
 
 		// Vertical appearance is centered. Consistent with
 		// https://docs.getodk.org/form-question-types/#vertical-range-widget
@@ -145,18 +159,27 @@ const orientation = props.node.appearances.vertical ? 'vertical' : 'horizontal';
 
 		.range-bound {
 			right: 0;
+			width: 1rem;
 		}
 
 		.range-min {
-			top: 0;
+			top: 1px;
 		}
 
 		.range-max {
-			bottom: 0;
+			bottom: 1px;
+		}
+
+		.range-value {
+			align-self: anchor-center;
+			right: anchor(left);
+			margin-right: 0.5rem;
 		}
 	}
 }
 
+
+
 // = track (full-width; full-height in vertical orientation)
 .p-slider {
 	background-color: var(--odk-primary-light-background-color);

From 709f5086b9893d5f9b2e446445f99958b6b7a32d Mon Sep 17 00:00:00 2001
From: Gareth Bowen <gareth@bowenwebdesign.co.nz>
Date: Tue, 5 May 2026 16:52:41 +1200
Subject: [PATCH 2/4] changeset

---
 .changeset/loud-tips-arrive.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/loud-tips-arrive.md

diff --git a/.changeset/loud-tips-arrive.md b/.changeset/loud-tips-arrive.md
new file mode 100644
index 000000000..1776736c9
--- /dev/null
+++ b/.changeset/loud-tips-arrive.md
@@ -0,0 +1,5 @@
+---
+'@getodk/web-forms': minor
+---
+
+Improved display of range widget to include selected value

From 415e8c7c613f4271abe14e8dcf1b6d3a403db4f7 Mon Sep 17 00:00:00 2001
From: Gareth Bowen <gareth@bowenwebdesign.co.nz>
Date: Tue, 5 May 2026 17:06:37 +1200
Subject: [PATCH 3/4] remove empty lines

---
 .../src/components/form-elements/range/RangeControl.vue         | 2 --
 1 file changed, 2 deletions(-)

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 146125f47..6730a9b66 100644
--- a/packages/web-forms/src/components/form-elements/range/RangeControl.vue
+++ b/packages/web-forms/src/components/form-elements/range/RangeControl.vue
@@ -178,8 +178,6 @@ const orientation = props.node.appearances.vertical ? 'vertical' : 'horizontal';
 	}
 }
 
-
-
 // = track (full-width; full-height in vertical orientation)
 .p-slider {
 	background-color: var(--odk-primary-light-background-color);

From 3e0009fc3f295e71b5e5dfe0aa8bcc26d65b4acb Mon Sep 17 00:00:00 2001
From: Gareth Bowen <gareth@bowenwebdesign.co.nz>
Date: Wed, 6 May 2026 10:28:56 +1200
Subject: [PATCH 4/4] review feedback

---
 .../form-elements/range/RangeControl.vue      | 53 +++++++++++--------
 1 file changed, 32 insertions(+), 21 deletions(-)

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 6730a9b66..0974b5824 100644
--- a/packages/web-forms/src/components/form-elements/range/RangeControl.vue
+++ b/packages/web-forms/src/components/form-elements/range/RangeControl.vue
@@ -56,12 +56,12 @@ const orientation = props.node.appearances.vertical ? 'vertical' : 'horizontal';
 
 	<template v-else>
 		<div :class="['range-control-container', orientation]">
+			<div class="range-value">
+				<span>{{ numberValue }}</span>
+			</div>
 			<div class="range-bound range-min">
 				{{ start }}
 			</div>
-			<div class="range-value">
-				{{ numberValue }}
-			</div>
 			<RangeSlider
 				:id="node.nodeId"
 				:disabled="node.currentState.readonly"
@@ -109,49 +109,50 @@ const orientation = props.node.appearances.vertical ? 'vertical' : 'horizontal';
 	--track-value-emphasis: 0.125rem;
 	--thumb-size: 1.25rem;
 	--tick-size: 0.125rem;
+	--gutter-width: 2lh;
 
 	position: relative;
 
 	.range-bound {
 		position: absolute;
 		line-height: 1;
-	}
-
-	:deep(.p-slider-handle) {
-		anchor-name: --current-value;
+		font-size: var(--odk-hint-font-size);
+		color: var(--odk-muted-text-color);
 	}
 
 	.range-value {
-		position: absolute;
-		position-anchor: --current-value;
+		font-weight: bold;
 	}
 
 	&.horizontal {
 		height: var(--track-size);
-		padding: 2lh 0.5rem 2lh 0.5rem;
+		padding: var(--gutter-width) var(--odk-spacing-m);
 
 		.range-bound {
 			bottom: 0;
 		}
 
 		.range-min {
-			left: 1px;
+			left: 0;
 		}
 
 		.range-max {
-			right: 4px;
+			right: 0;
 		}
 
 		.range-value {
-			justify-self: anchor-center;
-			bottom: anchor(top);
-			margin-bottom: 0.25rem;
+			text-align: center;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
 		}
 	}
 
 	&.vertical {
+
 		width: var(--track-size);
-		padding: 0.5lh 2lh 0.5lh;
+		padding: var(--odk-spacing-m) var(--gutter-width);
 
 		// Vertical appearance is centered. Consistent with
 		// https://docs.getodk.org/form-question-types/#vertical-range-widget
@@ -163,17 +164,27 @@ const orientation = props.node.appearances.vertical ? 'vertical' : 'horizontal';
 		}
 
 		.range-min {
-			top: 1px;
+			top: 0;
 		}
 
 		.range-max {
-			bottom: 1px;
+			bottom: 0;
 		}
 
 		.range-value {
-			align-self: anchor-center;
-			right: anchor(left);
-			margin-right: 0.5rem;
+			display: flex;
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			align-items: center;
+			right: var(--gutter-width);
+			padding-right: var(--odk-spacing-l);
+
+			span {
+				display: inline-block;
+				width: var(--gutter-width);
+				text-align: right;
+			}
 		}
 	}
 }