{{ block title }}
    Contribution
{{ endblock }}
{{ block content }}

How much would you like to contribute?

<style>
    .slider-container {
        text-align: center;
        font-size: 32px; /* This sets the size of the text */
        margin: 20px;
    }

    input[type="range"] {
        width: 80%; /* Adjust the width of the slider */
    }

    .slider-value {
        font-size: 48px; /* This sets the size of the value text */
        color: #333; /* You can adjust the color if you'd like */
    }
</style>

<div class="slider-container">
    <input type="range" id="volume" name="volume" min="0" max="10" oninput="updateValue()" />
    <div class="slider-value" id="sliderValue">0</div>
</div>

<script>
    function updateValue() {
        var slider = document.getElementById("volume");
        var valueDiv = document.getElementById("sliderValue");
        valueDiv.textContent = slider.value;
        document.getElementById("id_contribution").value = slider.value;
    }

    // Call the function to initialize the value on page load
    updateValue();
</script>

<input hidden=true name="contribution" id="id_contribution" />

    {{ next_button }}


{{ endblock }}