{% for answer in question.answers%}
    <div style="height:{{ plugin.space_before_slider }}px;"></div>
    <div> {{ answer.label }}</div> <br/>
    <div class="slC">
        <div class="slC__inner">
            <div class="slC__slider" id="slider_{{answer.questionField}}">
                <input type="hidden" name="answers[{{answer.questionField}}]" value="{{ answer.value }}">
            </div>

        </div>
    </div>
    <div style="height:{{ plugin.space_after_slider }}px;"></div>

    <script>
        $(document).ready(function () {
            var value = parseInt($('input[name="answers[{{answer.questionField}}]"]').val());

            var leftSideText  = $('#left_side_text').val();
            var rightSideText = $('#right_side_text').val();

            var min = parseInt($('#scale_min').val());
            var max = parseInt($('#scale_max').val());
            var step = parseInt($('#scale_step').val());

            var sliderScaleDefault = {
                value: value,
                leftSideText: leftSideText,
                rightSideText: rightSideText,
                min: min,
                max: max,
                step: step
            };

            rangeSlider($('#slider_{{ answer.questionField }}'), sliderScaleDefault);
        });

    </script>

{% endfor %}