slider script does not work inside update panel not sure why
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<asp:Label ID="lblerror" runat="server" Text="" ForeColor="Red"></asp:Label>
<div class="padding15">
<h4 class=" bold">
Service Type <br />
<small>
Please select the Personal Assistant service that fits your needs.
</small>
</h4>
</div>
<div class="row ">
<br />
<div class="padding15" id="dhours" runat="server">
<h4 class=" bold">
Number of Hours <br />
<small>
How many hours of personal assistant services to book
</small>
</h4>
<div class=" row">
<div class="form-group col-md-6 no-padding">
<input type="range" runat="server" min="1" step="1" max="8" value="0" class="slider" id="myRange5">
<asp:Label ID="lblnumberofhours" runat="server" Text="0"></asp:Label>
</div>
</div>
</div>
<%-- hour script outside update panel to hide and false--%>
<script>
//var slider = document.getElementById("myRange");
var slider5 = document.getElementById("<%=myRange5.ClientID %>");
var output5 = document.getElementById("<%=lblnumberofhours.ClientID %>");
output5.innerHTML = slider5.value;
slider5.oninput = function () {
output5.innerHTML = this.value;
document.getElementById("<%=btnUpload.ClientID %>").click();
}
</script>
</ContentTemplate>
</asp:UpdatePanel>