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>
}