{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template mod_questionnaire/question_slider

    Template which defines a slider type question survey display.

    Classes required for JS:
    * /mod/questionnaire/module.js

    Data attributes required for JS:
    * none

    Context variables required for this template:

    Example context (json):
    {
        "qelements": {
            "extradata":
                {
                    "id": "slider1",
                    "name": "q1",
                    "minrange": "1",
                    "maxrange": "10",
                    "startingvalue": 5,
                    "stepvalue": "1",
                    "leftlabel": "Left label",
                    "rightlabel": "Right label",
                    "centerlabel": "Center label"
                }
        }
    }
    }}
<!-- Begin HTML generated from question_slider template. -->
{{#qelements}}
    {{#extradata}}
        <div class="question-slider">
            <div class="left-side-label">{{extradata.leftlabel}}</div>
            <div class="middle-side-content">
                <div class="slider">
                    <input name="{{extradata.name}}" type="range" min="{{extradata.minrange}}"
                           max="{{extradata.maxrange}}" step="{{extradata.stepvalue}}"
                           value="{{extradata.startingvalue}}" class="questionnaire-slider" id="{{extradata.id}}">
                    <output class="bubble"></output>
                </div>
                <div class="middle-side-label">{{extradata.centerlabel}}</div>
            </div>
            <div class="right-side-label">{{extradata.rightlabel}}</div>
        </div>
    {{/extradata}}
{{/qelements}}
<!-- End HTML generated from question_slider template. -->