Implement Range Slider inside Update Panel using HTML Input type range in ASP.Net

Hi nauna,

Refer below sample code.

HTML

<style type="text/css">
    .slider
    {
        -webkit-appearance: none;
        width: 100%;
        height: 25px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }
</style>
<asp:ScriptManager runat="server" />
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <div class="row" id="dvhours" runat="server">
            <div class="col-md-3">
                Number of Hours
            </div>
            <div class="col-md-6">
                <input type="range" min="0" step="1" max="50" value="0" class="slider" id="myRange5" />
                <asp:Label ID="lblnumberofhours" runat="server" Text="0"></asp:Label>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
    SetRangeValue();
    function SetRangeValue() {
        var slider5 = document.getElementById("myRange5");
        var output5 = document.getElementById("<%=lblnumberofhours.ClientID %>");
        output5.innerHTML = slider5.value;
        slider5.oninput = function () {
            output5.innerHTML = this.value;
        }
    }

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                SetRangeValue();
            }
        });
    };
</script>

Screenshot