{% extends "base.html" %}

{% block header %}
  <h1>{% block title %}Set class names{% endblock %}</h1>
{% endblock %}

{% block content %}
<form method="POST" action="{{ url_for('config.set_number_of_classes') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
    <input type="range" min="2" max="10" value="2" class="slider" id="number_of_classes_slider" name="number_of_classes">
    <p>Value: <span id="number_of_classes_slider_value"></span></p>
    <input type="submit" value="Submit">
</form>

<script>
    var slider = document.getElementById("number_of_classes_slider");
    var output = document.getElementById("number_of_classes_slider_value");
    output.innerHTML = slider.value;
    
    slider.oninput = function() {
      output.innerHTML = this.value;
    }
</script>
{% endblock %}