{%
Dim ar = CurrentQuestion.ParentLoop.Answers
Dim inputName
Dim inputValue
Dim caption
Dim image
Dim j
Dim labelCount = 0

Dim adcId = CurrentADC.InstanceId
Dim interconnection = (CurrentADC.PropValue("interconnection") = "1")
Dim freezeBoxLabel = CurrentADC.PropValue("freezeBoxLabel")

IF CurrentADC.PropValue("rightLabelText") <> "" Then
	labelCount = labelCount + 1
EndIF
IF CurrentADC.PropValue("leftLabelText") <> "" Then
	labelCount = labelCount + 1
EndIF

For j = 1 To ar.Count
	inputName = CurrentQuestion.Iteration(ar[j].Index).InputName()
    caption   = ar[j].Caption
    image	  = ar.ResourceURL[j]
%}
<!-- numeric loop -->
	<input type="hidden" id="{%= inputName %}" name="{%= inputName %}" value="{%= CurrentQuestion.Iteration(ar[j].Index).inputValue() %}" class="result" />

    {% IF CurrentADC.PropValue("sliderOrientation") = "horizontal" Then %}

        <div class="sliderContainer" data-iteration="{%= j-1 %}">
        	<label class="caption">
                {% IF CurrentADC.PropValue("imageAlign") = "left" Then %}
                    {% IF image <> "" Then %} <img src="{%= image %}" /> {% EndIF %}
                {% EndIF %}
                {%:= caption %}
                {% IF CurrentADC.PropValue("imageAlign") = "right" Then %}
                    {% IF image <> "" Then %} <img src="{%= image %}" /> {% EndIF %}
                {% EndIF %}
            </label>
            <table class="slider" border="0" cellpadding="0" cellspacing="0" width="100%">

        {% IF CurrentADC.PropValue("labelPlacement") = "top" Then %}

        	{% IF labelCount > 0 and CurrentADC.PropValue("displayLabelText") <> "none" Then %}
                <tr valign="middle" class="sliderTop">
                    {% IF CurrentADC.PropValue("leftLabelText") <> "" Then %}
                    <td width="{%= CurrentADC.PropValue("labelWidth") %}" style="padding-bottom:10px;" align="left">
                        <div class="leftLabel"><div class="sliderLabel">{%:= CurrentADC.PropValue("leftLabelText") %}</div></div>
                    </td>
                    {% EndIF %}
                    <td width="100%"></td>
                    {% IF CurrentADC.PropValue("rightLabelText") <> "" Then %}
                    <td width="{%= CurrentADC.PropValue("labelWidth") %}" style="padding-bottom:10px;" align="right">
                        <div class="rightLabel"><div class="sliderLabel">{%:= CurrentADC.PropValue("rightLabelText") %}</div></div>
                    </td>
                    {% EndIF %}
                </tr>
            {% EndIF %}

            <tr valign="middle" class="sliderMiddle">
                <td colspan="{%= labelCount + 1 %}" align="left"><div class="noUiSlider noUi-extended"></div></td>
            </tr>

            <tr valign="middle" class="sliderBottom">
                <td colspan="{%= labelCount + 1 %}" style="padding-top:10px;" align="{%= CurrentADC.PropValue("dkPosition") %}"><div class="dk" data-value="-1">{%:= CurrentADC.PropValue("dkText")%}</div></td>
            </tr>


        {% Else %}

            {% IF CurrentADC.PropValue("labelPlacement") = "side" Then %}

            	{% IF labelCount > 0 and CurrentADC.PropValue("displayLabelText") <> "none" Then %}

                    <tr valign="middle" class="sliderTop">
                        {% IF CurrentADC.PropValue("leftLabelText") <> "" Then %}
                        <td width="{%= CurrentADC.PropValue("labelWidth") %}" style="padding-bottom:10px;" align="left">
                            <div class="leftLabel"><div class="sliderLabel">{%:= CurrentADC.PropValue("leftLabelText") %}</div></div>
                        </td>
                       {% EndIF %}
                       <td width="100%"></td>
                       {% IF CurrentADC.PropValue("rightLabelText") <> "" Then %}
                        <td width="{%= CurrentADC.PropValue("labelWidth") %}" style="padding-bottom:10px;" align="right">
                            <div class="rightLabel"><div class="sliderLabel">{%:= CurrentADC.PropValue("rightLabelText") %}</div></div>
                        </td>
                        {% EndIF %}
                    </tr>

            	{% EndIF %}

            	<tr valign="middle" class="sliderMiddle">
                	{% IF CurrentADC.PropValue("leftLabelText") <> "" and CurrentADC.PropValue("displayLabelText") <> "none" Then %}
                        <td width="{%= CurrentADC.PropValue("labelWidth") %}" align="left" style="text-align:left;">
                        <div class="leftLabel"><div class="sliderLabel">{%:= CurrentADC.PropValue("leftLabelText") %}</div></div>
                    </td>
                    {% EndIF %}
                    <td align="left"><div class="noUiSlider noUi-extended"></div></td>
                    {% IF CurrentADC.PropValue("rightLabelText") <> "" and CurrentADC.PropValue("displayLabelText") <> "none" Then %}
                    <td width="{%= CurrentADC.PropValue("labelWidth") %}" align="right" style="text-align:right;">
                        <div class="rightLabel"><div class="sliderLabel">{%:= CurrentADC.PropValue("rightLabelText") %}</div></div>
                    </td>
                    {% EndIF %}
                </tr>

            {% Else %}

            	<tr valign="middle" class="sliderMiddle">
                    <td colspan="{%= labelCount + 1 %}" align="left"><div class="noUiSlider noUi-extended"></div></td>
                </tr>

            {% EndIF %}

            {% IF labelCount > 0 and CurrentADC.PropValue("labelPlacement") = "bottom" and CurrentADC.PropValue("displayLabelText") <> "none" Then %}
                <tr valign="middle" class="sliderBottom">
                    {% IF CurrentADC.PropValue("leftLabelText") <> "" Then %}
                    <td width="{%= CurrentADC.PropValue("labelWidth") %}" style="padding-top:10px;" align="left">
                        <div class="leftLabel"><div class="sliderLabel">{%:= CurrentADC.PropValue("leftLabelText") %}</div></div>
                    </td>
                   {% EndIF %}
                   <td width="100%"></td>
                   {% IF CurrentADC.PropValue("rightLabelText") <> "" Then %}
                    <td width="{%= CurrentADC.PropValue("labelWidth") %}" style="padding-top:10px;" align="right">
                        <div class="rightLabel"><div class="sliderLabel">{%:= CurrentADC.PropValue("rightLabelText") %}</div></div>
                    </td>
                    {% EndIF %}
                </tr>

            {% EndIF %}
            <tr valign="middle" class="sliderDK">
            	<td colspan="{%= labelCount + 1 %}" style="padding-top:10px;" align="{%= CurrentADC.PropValue("dkPosition") %}"><div class="dk" data-value="-1">{%:= CurrentADC.PropValue("dkText")%}</div></td>
			</tr>

        {% EndIF %}

        </table>

				{% IF interconnection Then %}
				<label><input class="freezeBox" type="checkbox" id="freeze{%= adcId %}_{%= j %}" onchange="dim{%= adcId %}(this.id)" />{%=freezeBoxLabel%}</label>
				{% EndIF %}

    </div>

{% Else %}
<!-- VERTICAL LAYOUT -->

	<div class="sliderContainer">
        <table class="slider" border="0" cellpadding="0" cellspacing="0" width="100%">
        	{% IF CurrentADC.PropValue("rightLabelText") <> "" Then %}
        	<tr valign="middle">
                <td width="{%= CurrentADC.PropValue("labelWidth") %}" style="padding-bottom:10px;" align="center">
                    <div class="rightLabel"><div class="sliderLabel">{%:= CurrentADC.PropValue("rightLabelText") %}</div></div>
                </td>
            </tr>
            {% EndIF %}
            <tr valign="middle">
                <td align="left"><div class="noUiSlider noUi-extended" style="height:{%= CurrentADC.PropValue("sliderHeight") %};"></div></td>
            </tr>
            {% IF CurrentADC.PropValue("leftLabelText") <> "" Then %}
            <tr valign="middle">
            	<td width="{%= CurrentADC.PropValue("labelWidth") %}" style="padding-top:10px;">
                    <div class="leftLabel"><div class="sliderLabel">{%:= CurrentADC.PropValue("leftLabelText") %}</div></div>
                </td>
            </tr>
            {% EndIF %}
            <tr valign="middle">
            	<td style="padding-top:10px;">
                    <div class="dk" data-value="-1">{%:= CurrentADC.PropValue("dkText")%}</div>
                </td>
            </tr>

        </table>

	{% IF interconnection Then %}
	<label><input class="freezeBox" type="checkbox" id="freeze{%= adcId %}_{%= j %}" onchange="dim{%= adcId %}(this.id)" />{%=freezeBoxLabel%}</label>
	{% EndIF %}
    </div>

{% EndIF %}

{% Next %}