{{ block content }}

<style>
#slidecontainer {
    width: 70%;
}

.slider {
    -webkit-appearance: none;
    width: 50%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

/* This rule causes the label to vertically align properly */
label {
  vertical-align:middle;
  display:inline-block;
  margin-bottom:1em;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}


</style>

    <p style="text-align: center">
        How strong was your preference for the video you chose in the previous trial?
        <br>
        Use the slider to indicate the strength of your preference. The order of the videos may be different from before.
    </p>

    <span>
        <center>
        <video width="200px" autoplay loop muted preload='auto' >
            <source src="{{ static video1 }}" type="video/mp4">
        </video>

        <span id="slidecontainer">
            <input type="range" min="1" max="100" value="50" class="slider" name="confidence" id="myRange">
        </span>

        <video class="stick-to-right" width="200px" autoplay loop muted preload='auto'>
            <source src="{{ static video2 }}" type="video/mp4">
        </video>
        </center>
    </span>


    <center>
        {{ next_button }}
    </center>

{{ endblock }}