HTML Input Range Number Slider With Tic Marks

rust

```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;

  //for tic in min..=max {
    //tics.push(format!("{}", tic))
  //};

    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());
}