{{ block title }}
Position as many sliders as possible at the 50 mark within two minutes.
{{ endblock }}

{{ block content }}

<!-- SLIDERS -->

<div>
    <div style="display: inline-block;width: 66%;margin-left: 1%;">
        <input style="padding-top: 12px;" type="range" name="slider1" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 57%;margin-left: 15%;">
        <input style="padding-top: 12px;" type="range" name="slider2" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 66%;margin-left: 0%;">
        <input style="padding-top: 12px;" type="range" name="slider3" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 43%;margin-left: 14%;">
        <input style="padding-top: 12px;" type="range" name="slider4" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 61%;margin-left: 8%;">
        <input style="padding-top: 12px;" type="range" name="slider5" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 40%;margin-left: 1%;">
        <input style="padding-top: 12px;" type="range" name="slider6" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 63%;margin-left: 15%;">
        <input style="padding-top: 12px;" type="range" name="slider7" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 50%;margin-left: 2%;">
        <input style="padding-top: 12px;" type="range" name="slider8" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 45%;margin-left: 11%;">
        <input style="padding-top: 12px;" type="range" name="slider9" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 32%;margin-left: 13%;">
        <input style="padding-top: 12px;" type="range" name="slider10" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 38%;margin-left: 11%;">
        <input style="padding-top: 12px;" type="range" name="slider11" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 54%;margin-left: 13%;">
        <input style="padding-top: 12px;" type="range" name="slider12" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 48%;margin-left: 8%;">
        <input style="padding-top: 12px;" type="range" name="slider13" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 59%;margin-left: 5%;">
        <input style="padding-top: 12px;" type="range" name="slider14" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 49%;margin-left: 11%;">
        <input style="padding-top: 12px;" type="range" name="slider15" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 38%;margin-left: 14%;">
        <input style="padding-top: 12px;" type="range" name="slider16" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 45%;margin-left: 14%;">
        <input style="padding-top: 12px;" type="range" name="slider17" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 69%;margin-left: 12%;">
        <input style="padding-top: 12px;" type="range" name="slider18" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 32%;margin-left: 0%;">
        <input style="padding-top: 12px;" type="range" name="slider19" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 45%;margin-left: 4%;">
        <input style="padding-top: 12px;" type="range" name="slider20" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 42%;margin-left: 9%;">
        <input style="padding-top: 12px;" type="range" name="slider21" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 64%;margin-left: 11%;">
        <input style="padding-top: 12px;" type="range" name="slider22" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 45%;margin-left: 10%;">
        <input style="padding-top: 12px;" type="range" name="slider23" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 65%;margin-left: 14%;">
        <input style="padding-top: 12px;" type="range" name="slider24" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 57%;margin-left: 15%;">
        <input style="padding-top: 12px;" type="range" name="slider25" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 34%;margin-left: 10%;">
        <input style="padding-top: 12px;" type="range" name="slider26" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 62%;margin-left: 5%;">
        <input style="padding-top: 12px;" type="range" name="slider27" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 44%;margin-left: 13%;">
        <input style="padding-top: 12px;" type="range" name="slider28" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 45%;margin-left: 1%;">
        <input style="padding-top: 12px;" type="range" name="slider29" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 32%;margin-left: 15%;">
        <input style="padding-top: 12px;" type="range" name="slider30" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 49%;margin-left: 2%;">
        <input style="padding-top: 12px;" type="range" name="slider31" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 64%;margin-left: 2%;">
        <input style="padding-top: 12px;" type="range" name="slider32" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 39%;margin-left: 12%;">
        <input style="padding-top: 12px;" type="range" name="slider33" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 66%;margin-left: 11%;">
        <input style="padding-top: 12px;" type="range" name="slider34" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 68%;margin-left: 4%;">
        <input style="padding-top: 12px;" type="range" name="slider35" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 37%;margin-left: 3%;">
        <input style="padding-top: 12px;" type="range" name="slider36" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 58%;margin-left: 5%;">
        <input style="padding-top: 12px;" type="range" name="slider37" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 42%;margin-left: 11%;">
        <input style="padding-top: 12px;" type="range" name="slider38" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 57%;margin-left: 13%;">
        <input style="padding-top: 12px;" type="range" name="slider39" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 58%;margin-left: 7%;">
        <input style="padding-top: 12px;" type="range" name="slider40" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 47%;margin-left: 4%;">
        <input style="padding-top: 12px;" type="range" name="slider41" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 69%;margin-left: 5%;">
        <input style="padding-top: 12px;" type="range" name="slider42" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 37%;margin-left: 8%;">
        <input style="padding-top: 12px;" type="range" name="slider43" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 59%;margin-left: 9%;">
        <input style="padding-top: 12px;" type="range" name="slider44" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 40%;margin-left: 5%;">
        <input style="padding-top: 12px;" type="range" name="slider45" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 41%;margin-left: 15%;">
        <input style="padding-top: 12px;" type="range" name="slider46" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 52%;margin-left: 10%;">
        <input style="padding-top: 12px;" type="range" name="slider47" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 57%;margin-left: 7%;">
        <input style="padding-top: 12px;" type="range" name="slider48" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 30%;margin-left: 1%;">
        <input style="padding-top: 12px;" type="range" name="slider49" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 51%;margin-left: 10%;">
        <input style="padding-top: 12px;" type="range" name="slider50" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 45%;margin-left: 2%;">
        <input style="padding-top: 12px;" type="range" name="slider51" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 46%;margin-left: 14%;">
        <input style="padding-top: 12px;" type="range" name="slider52" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 55%;margin-left: 5%;">
        <input style="padding-top: 12px;" type="range" name="slider53" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 54%;margin-left: 15%;">
        <input style="padding-top: 12px;" type="range" name="slider54" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 45%;margin-left: 8%;">
        <input style="padding-top: 12px;" type="range" name="slider55" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 63%;margin-left: 15%;">
        <input style="padding-top: 12px;" type="range" name="slider56" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 68%;margin-left: 15%;">
        <input style="padding-top: 12px;" type="range" name="slider57" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 34%;margin-left: 5%;">
        <input style="padding-top: 12px;" type="range" name="slider58" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 61%;margin-left: 14%;">
        <input style="padding-top: 12px;" type="range" name="slider59" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 55%;margin-left: 4%;">
        <input style="padding-top: 12px;" type="range" name="slider60" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span></p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 43%;margin-left: 0%;">
        <input style="padding-top: 12px;" type="range" name="slider61" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 63%;margin-left: 1%;">
        <input style="padding-top: 12px;" type="range" name="slider62" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 40%;margin-left: 7%;">
        <input style="padding-top: 12px;" type="range" name="slider63" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 31%;margin-left: 1%;">
        <input style="padding-top: 12px;" type="range" name="slider64" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 39%;margin-left: 11%;">
        <input style="padding-top: 12px;" type="range" name="slider65" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 45%;margin-left: 3%;">
        <input style="padding-top: 12px;" type="range" name="slider66" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 51%;margin-left: 14%;">
        <input style="padding-top: 12px;" type="range" name="slider67" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 52%;margin-left: 8%;">
        <input style="padding-top: 12px;" type="range" name="slider68" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 55%;margin-left: 8%;">
        <input style="padding-top: 12px;" type="range" name="slider69" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 52%;margin-left: 7%;">
        <input style="padding-top: 12px;" type="range" name="slider70" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 43%;margin-left: 11%;">
        <input style="padding-top: 12px;" type="range" name="slider71" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 50%;margin-left: 7%;">
        <input style="padding-top: 12px;" type="range" name="slider72" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 49%;margin-left: 13%;">
        <input style="padding-top: 12px;" type="range" name="slider73" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 44%;margin-left: 14%;">
        <input style="padding-top: 12px;" type="range" name="slider74" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 56%;margin-left: 15%;">
        <input style="padding-top: 12px;" type="range" name="slider75" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 35%;margin-left: 14%;">
        <input style="padding-top: 12px;" type="range" name="slider76" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 66%;margin-left: 11%;">
        <input style="padding-top: 12px;" type="range" name="slider77" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 58%;margin-left: 10%;">
        <input style="padding-top: 12px;" type="range" name="slider78" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 58%;margin-left: 12%;">
        <input style="padding-top: 12px;" type="range" name="slider79" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 34%;margin-left: 15%;">
        <input style="padding-top: 12px;" type="range" name="slider80" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 31%;margin-left: 6%;">
        <input style="padding-top: 12px;" type="range" name="slider81" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 38%;margin-left: 5%;">
        <input style="padding-top: 12px;" type="range" name="slider82" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 69%;margin-left: 0%;">
        <input style="padding-top: 12px;" type="range" name="slider83" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 48%;margin-left: 15%;">
        <input style="padding-top: 12px;" type="range" name="slider84" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 39%;margin-left: 3%;">
        <input style="padding-top: 12px;" type="range" name="slider85" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 37%;margin-left: 12%;">
        <input style="padding-top: 12px;" type="range" name="slider86" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 33%;margin-left: 2%;">
        <input style="padding-top: 12px;" type="range" name="slider87" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 59%;margin-left: 9%;">
        <input style="padding-top: 12px;" type="range" name="slider88" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 55%;margin-left: 7%;">
        <input style="padding-top: 12px;" type="range" name="slider89" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 41%;margin-left: 11%;">
        <input style="padding-top: 12px;" type="range" name="slider90" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 35%;margin-left: 7%;">
        <input style="padding-top: 12px;" type="range" name="slider91" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 49%;margin-left: 9%;">
        <input style="padding-top: 12px;" type="range" name="slider92" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 40%;margin-left: 10%;">
        <input style="padding-top: 12px;" type="range" name="slider93" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 54%;margin-left: 15%;">
        <input style="padding-top: 12px;" type="range" name="slider94" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 51%;margin-left: 14%;">
        <input style="padding-top: 12px;" type="range" name="slider95" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 34%;margin-left: 8%;">
        <input style="padding-top: 12px;" type="range" name="slider96" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 60%;margin-left: 4%;">
        <input style="padding-top: 12px;" type="range" name="slider97" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 37%;margin-left: 15%;">
        <input style="padding-top: 12px;" type="range" name="slider98" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 54%;margin-left: 12%;">
        <input style="padding-top: 12px;" type="range" name="slider99" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>

<div>
    <div style="display: inline-block;width: 30%;margin-left: 8%;">
        <input style="padding-top: 12px;" type="range" name="slider100" min="0" max="100" value="0" step="1"
            class="form-range">
    </div>

    <div style="display: inline-block; margin-left: 30px">
        <p style="display: inline-block;">Value: <span class="output-field"></span>%</p>
    </div>
</div>

<br>








<!-- CODE -->
<script>
    var sliders = document.getElementsByClassName("form-range");
    var slider_values = document.getElementsByClassName("output-field");

    for (let i = 0; i < sliders.length; i++) {
        // Set initial value
        slider_values[i].innerHTML = sliders[i].value;

        // Update value when slider is moved
        sliders[i].oninput = function () {
            slider_values[i].innerHTML = this.value;
        }
    }
</script>
{{endblock}}