{# Slider/Range Control #}
<div class="dft-variable-control dft-variable dft-variable-slider"
     data-variable-id="{{ name }}"
     data-variable-label="{{ label }}"
     {% if depends_on %}data-depends-on="{{ depends_on | tojson }}"{% endif %}>

  <label class="dft-variable-label" for="var-{{ name }}">{{ label }}:</label>

  <input type="range"
         id="var-{{ name }}"
         name="{{ name }}"
         class="dft-variable-input"
         data-variable="{{ name }}"
         min="{{ min if min is not none else 0 }}"
         max="{{ max if max is not none else 100 }}"
         step="{{ step if step is not none else 1 }}"
         value="{{ value if value is not none else (min if min is not none else 0) }}"
         oninput="this.nextElementSibling.textContent = this.value"
         onchange="updateVariable('{{ name | js_escape }}', this.value)">

  <span class="dft-variable-slider-value">{{ value if value is not none else (min if min is not none else 0) }}</span>
</div>