{% load otree static %}
<div id="main">
    {% if widget.attrs.show_value %}
        {% if widget.attrs.show_block == 'left' %}
            <div class="sliderinfoblocks sliderblockleft" id="info_{{ widget.attrs.id }}">{{ widget.attrs.slider_start_value }}</div>
        {% endif %}
    {% endif %}
    <div class="sliderouter">
        <div id="{{widget.attrs.id}}" class="slider"></div>
        <input type="hidden" name="{{ widget.name }}" id="{{ widget.attrs.id }}"
               value="{{ widget.attrs.slider_start_value }}">
    </div>
    {% if widget.attrs.show_value %}
        {% if widget.attrs.show_block == 'right' %}
            <div class="sliderinfoblocks sliderblockright">Green</div>
        {% endif %}
    {% endif %}
</div>


<!--<script src="http://code.jquery.com/jquery.js"></script>-->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">


<script src="{% static 'jquery-ui/jquery.ui.labeledslider.js' %}"></script>
<link rel="stylesheet" href="{% static 'jquery-ui/jquery.ui.labeledslider.css' %}">
<script>
    $(function () {
        $('div.slider#{{widget.attrs.id}}').labeledslider({
            orientation: 'horizontal',
            min: {{ widget.attrs.min|json }},
            max: {{ widget.attrs.max|json }},
            value: {{widget.attrs.slider_start_value|json}},
            step:{{ widget.attrs.step }},
            tickInterval: {{ widget.attrs.tick_interval }},
            secondaryTicks: {{ widget.attrs.secondary_ticks|json }},
            showLabels: {{ widget.attrs.show_ticks|json }},
            ndigits:{{ widget.attrs.ndigits|json }},
            suffix:{{ widget.attrs.suffix|json }},
            slide: function (event, ui) {
                var handleIndex = $(ui.handle).data('uiSliderHandleIndex');
                var label = handleIndex == 0 ? '.sliderblockleft#info_{{ widget.attrs.id }}' : '#max';
                $(label).html( ui.value);
                $('input#{{widget.attrs.id}}').val(ui.value);
            },
            create: function (event, ui) {
            }

        });

    });
</script>

<style>

    .sliderinfoblocks {
        width: auto;
        max-width: 10%;
        font-size: 1rem;
        padding: .375rem .75rem;
        text-align: center;
        min-width: 60px !important;
        background-color: #e9ecef;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        min-height: 1rem;
        margin-top: -65px;
    }

    .sliderinfoblocks:after, .sliderinfoblocks:before {
        box-sizing: border-box;

    }

    .sliderblockleft {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .sliderblockright {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    #main {
        width: auto;
        height: auto;
        margin-top:10px;
        -webkit-align-items: center; /* Safari 7.0+ */
        display: flex;
        align-items: center;
    }

    #main .sliderouter {

    }

    #main div {
        -webkit-flex: 1; /* Safari 6.1+ */
        flex: 1;
    }

</style>