Click here to Skip to main content
15,794,275 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,
Am using Range slider in Jquery,When i drag a Slider the value will be change.Sp there is no Problem there.What my issue is ,i have a two text boxes below slider.When we Drag the slider the range will change,and the value will be display in textbox.Based On that values i will filter my records.How it is? Anyone Explain

Thanks

What I have tried:

I tried With the textbox_textchanged .But i cant to get the value.
Posted
Updated 17-Nov-16 22:12pm
Comments
Nelek 18-Nov-16 2:08am    
textbox_textchanged would be triggered when you change the content of the textbox. Continue searching the methods of the textbox. You should find the correct one.
Member 12857356 18-Nov-16 2:14am    
Hi Nelek,
Thanks For Reply,

Textbox_textchanges will Triggerd only when we entered some text in the Textbox. But in the Range Slider when we drag the slider automatically the values in the Textbox will change so the textbox_textchanged will not be triggered.
Any Idea How to get the slider values to Filter my data.

Thanks

1 solution

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Page2.aspx.cs" Inherits="Page2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
      $(function () {
          $("#slider-range").slider({
              range: true,
              min: 0,
              max: 500,
              values: [75, 300],
              slide: function (event, ui) {
                  $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
                  $("#start1").val(ui.values[0]);
                  $("#start2").val(ui.values[1]);
              },
                  change: function (event, ui) {
                  debugger;
                  alert('Slider Value Changed');

                  //Write Code to Call ajax or _dopostback to filter records
                  $.ajax({
                      method: 'post',
                      url: 'UserViewProd.aspx/range',

                      contentType: 'application/json; charset=utf-8',
                      data: "{'Price1':'" + ui.values[0] + "','Price2':'" + ui.values[1] + "'}",
                      success: function (data) {
                          // $("#txtminprice").val(data.d);
                          // $("#txtmaxprice").val(data.d);
                      },
                      error: function (err) {
                          alert(err);
                      }

                  });
                  //End
              }
          });
          $("#amount").val("$" + $("#slider-range").slider("values", 0) +
            " - $" + $("#slider-range").slider("values", 1));
      });
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     
<p>
  <label for="amount">Price range:</label>
    Start: <input id="start1" type="text" />
    <hr />
    End: <input id="start2" type="text" />
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="slider-range"></div>
 
    </div>
    </form>
</body>
</html>
 
Share this answer
 
v2
Comments
Member 12857356 18-Nov-16 3:22am    
I want the postback to filter my records.
thanks
Member 12857356 18-Nov-16 3:23am    
I want the postback Code to filter My records through webservice &Json
Er. Puneet Goel 18-Nov-16 3:30am    
thats so easy. Just Use Ajax post cal and use webservice and Json where I mention '//Write Code to Call ajax or _dopostback to filter records'
Member 12857356 18-Nov-16 5:11am    
How to get Two values ????
Example:"
$.ajax({
method: 'post',
url: 'UserViewProd.aspx/range',

contentType: 'application/json; charset=utf-8',
data: "{'Price1':'" + ui.values[0] + "','Price2':'" + ui.values[1] + "'}"
success: function (data) {
// $("#txtminprice").val(data.d);
// $("#txtmaxprice").val(data.d);
},
error: function (err) {
alert(err);
}

});

Is this Format Is Correct ? Or Wrong?
Er. Puneet Goel 18-Nov-16 5:19am    
I have just updated the solution, check that.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900