{{ block title }}Choose your initial action{{ endblock }}
{{ block content }}

<style>
.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}
.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}
</style>
<p id="txt">
    Waiting for your action.
</p>
<div class="slider-wrapper">
  <input id="init" type="range" orient="vertical" name="init_Action" min="0" max="5" step="0.1">
</div>
<script>
    document.getElementById("init").addEventListener("input", function () {
        document.getElementById("txt").textContent = "Your action is " + document.getElementById("init").value;
});
</script>
{% next_button %}

{{ endblock }}