{% props field: Field, label: String = "", min: i64 = 0, max: i64 = 100, step: String = "", unit: String = "", disabled: bool = false %}
{# --val is the filled share of the track, from the field's value; unit follows the value in the <output> #}
{%- let label = if label.is_empty() { field.label.clone() } else { label } %}
{%- let value = field.value.parse::<f64>().unwrap_or(min as f64) %}
{%- let percent = if max > min { ((value - min as f64) / (max - min) as f64 * 100.0).clamp(0.0, 100.0).round() } else { 0.0 } %}
<div class="ui-field">
<div style="display:flex;justify-content:space-between"><label class="ui-label" for="{{ field.id }}">{{ label }}</label><output class="ui-muted" for="{{ field.id }}">{{ field.value }}{{ unit }}</output></div>
<input class="ui-slider" type="range" id="{{ field.id }}" name="{{ field.name }}" min="{{ min }}" max="{{ max }}"{% if !step.is_empty() %} step="{{ step }}"{% end %} value="{{ field.value }}" style="--val:{{ percent }}%"{% if disabled %} disabled{% end %}>
</div>