Textchange event not working when jquery function is used

Question

I am using range slider of javascript in asp.net, i want to call code behind function for data binding so i have used on textchange event but evnt does not get fired when textchnged by jsfuction is there any other option to bind data when range slider value is changed.

Here is my code:

<div>
    <input id="myRange" type="range" min="1" max="10" value="1" class="slider" 
           onchange="abc()">
    <p>Value: <span id="demo"></span></p>
</div>
<script>
    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value;
    slider.oninput = function() {

        output.innerHTML = this.value;
    }
    var hiddenControl = '<%= inpHide.ClientID %>';
    document.getElementById(inpHide).value = output;

    function abc() {
        var hdnvalue = document.getElementById("demo");
        document.getElementById('<%=TextBox2.ClientID%>').value = hdnvalue.innerText;
    }
</script>

<asp:TextBox ID="TextBox2" runat="server" AutoPostBack="true" CausesValidation="true" 
   OnTextChanged="TextBox2_TextChanged"></asp:TextBox>

Answer 1

You will have to force the event call from javacript function like this:-

function abc()
 {
      var hdnvalue = document.getElementById("demo");   
      document.getElementById('<%=TextBox2.ClientID%>').value = hdnvalue.innerText;
      __doPostBack('TextBox2','TextChanged');
 }

You can also set the focus and remove it programmatically but that will be a bit lengthy approach.