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>