Code
```cargo
[dependencies]
minijinja = { version = "1.0", features = ["loader"] }
```
use minijinja::{Environment, context};
fn main() {
let label = "Hue";
let id = "hue";
let class_prefix = "lchSlider";
let min = 0;
let max = 359.999;
let step = 0.01;
let value = 260;
let mut tics: Vec<String> = vec![];
let show_tics = false;
let mut env = Environment::new();
env.add_template_owned("template", r#"
<div class="{{ class_prefix }}Wrapper">{% if show_tics == true %}
<datalist id="{{ id }}Tics">
{% for tic in tics %} <option value="{{ tic }}"></option>
{% endfor %}</datalist>{% endif %}
<label class="{{ class_prefix }}_labelWrapper">
<span class="{{ class_prefix }}_label">{{ label }}</span>
<span>
<input type="range" id="{{ id }}" name="{{ id }}"
min="{{ min }}" max="{{ max }}" step="{{ step }}"
class="{{ class_prefix }}Slider" {% if show_tics == true %}list="{{ id }}Tics"{% endif %} />
<span id="{{ id }}Value" class="{{ class_prefix }}Value"></span>
</span>
</label>
<script>document.addEventListener('DOMContentLoaded', () => {
const el = document.querySelector(`#{{ id }}`)
el.value = {{ value }}
document.querySelector('#{{ id }}Value').innerHTML= el.value
el.addEventListener('input', () =>{
document.querySelector('#{{ id }}Value').innerHTML = el.value
})
})</script>
</div>"#.to_string()
).unwrap();
let skeleton = env.get_template("template").unwrap();
let output = skeleton.render(context!(
class_prefix => class_prefix,
id => id,
label => label,
min => min,
max => max,
step => step,
tics => tics,
show_tics => show_tics,
value => value,
)).unwrap();
println!("{}", output.trim());
}