Componentize and isolate the ride range filter

1 files changed, 13 insertions, 0 deletions

diff --git a/web/ride-range-filter.templ b/web/ride-range-filter.templ
new file mode 100644
index 0000000..27eb802
--- /dev/null
+++ b/web/ride-range-filter.templ
@@ -0,0 +1,13 @@
+package web
+
+templ RideRangeFilter(field RangeFilterConfig) {
+	<fieldset class="ride-filter-group">
+		<legend>{ field.Legend }</legend>
+		<div class="range-values"><output data-range-value="min" for={ field.IDPrefix + "-min" }>{ field.FormatValue(field.ValueMin) }</output><span aria-hidden="true">to</span><output data-range-value="max" for={ field.IDPrefix + "-max" }>{ field.FormatValue(field.ValueMax) }</output></div>
+		<div class="range-control" data-range-filter={ field.Format } data-range-format={ field.Format }>
+			<div class="range-track" data-range-track></div>
+			<input id={ field.IDPrefix + "-min" } class="range-input range-input-min" type="range" name={ field.ParamMin } min={ formatRideFilterInt(field.BoundMin) } max={ formatRideFilterInt(field.BoundMax) } step={ formatRideFilterInt(field.Step) } value={ formatRideFilterInt(field.ValueMin) } data-range-min aria-label={ field.LabelMin }/>
+			<input id={ field.IDPrefix + "-max" } class="range-input range-input-max" type="range" name={ field.ParamMax } min={ formatRideFilterInt(field.BoundMin) } max={ formatRideFilterInt(field.BoundMax) } step={ formatRideFilterInt(field.Step) } value={ formatRideFilterInt(field.ValueMax) } data-range-max aria-label={ field.LabelMax }/>
+		</div>
+	</fieldset>
+}