The range slider issue.

Question

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 17-Nov-16 19:45pm

Member 12857356

Updated 17-Nov-16 21:12pm

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Er. Puneet Goel · Accepted Answer · 2016-11-17T21:12:00

Solution 1

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>

Posted 17-Nov-16 21:12pm

Er. Puneet Goel

Updated 17-Nov-16 23:19pm

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.

Member 12857356 18-Nov-16 5:21am

My Slider is working Good.But I want to Pass the values to the server side.

Er. Puneet Goel 18-Nov-16 5:24am

ui.values[0] and ui.values[1] is providing you the value. What is the error you are getting ?

Er. Puneet Goel 18-Nov-16 5:26am

You can verify this by:
alert(ui.values[0]);
alert(ui.values[1]);

Member 12857356 18-Nov-16 5:26am

when i change the slider the alert box Will appear Tat says [object object].

Member 12857356 18-Nov-16 5:28am

$(ajax) Outside the tag of Ajax The alert will Work and I got that value. But Inside ajax tag the value is not appear

Er. Puneet Goel 18-Nov-16 5:29am

the slier is working perfect but its your ajax function that is throwing error.

Member 12857356 18-Nov-16 5:30am

Yes Er.Punnet Goel.

Er. Puneet Goel 18-Nov-16 5:35am

replace your data line with:
data: "{Price1:'" + ui.values[0] + "',Price2:'" + ui.values[1] + "'}",

make sure your function must have Range(string Price1, string Price2) this signature.

Member 12857356 18-Nov-16 5:37am

Yeah My function name is range and my paramater name is Price1 and Price2

Er. Puneet Goel 18-Nov-16 5:39am

have you replaced the data line with the one i provided?

data: "{Price1:'" + ui.values[0] + "',Price2:'" + ui.values[1] + "'}",

Member 12857356 18-Nov-16 5:39am

Still I have the same error.
And this is my server side code

[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public void range(string Price1, string Price2)
{
string cs = ConfigurationManager.ConnectionStrings["str"].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
string str = "select * from tblProddetails where CategoryID where ProductPrice Between @1 and @2";
SqlCommand cmd = new SqlCommand(str, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
cmd.Parameters.AddWithValue("@1", Price1);
cmd.Parameters.AddWithValue("@2", Price2);
DataTable ds = new DataTable();
da.Fill(ds);
con.Open();
con.Close();
con.Dispose();
dlViewProd.DataSource = ds;
dlViewProd.DataBind();
}

Er. Puneet Goel 18-Nov-16 5:42am

Oh God...you are crzy...!

replace your signature with

public static void Range(string Price1, string Price2)

Please accpect solution as answer.

Member 12857356 18-Nov-16 5:42am

I dont Know Why this error Occured

Member 12857356 18-Nov-16 5:45am

If i use static my datalist make an error.(Object reference is non-static) like This.

Member 12857356 18-Nov-16 5:50am

R u there?

Er. Puneet Goel 18-Nov-16 5:51am

yes!

Member 12857356 18-Nov-16 5:53am

If i use static my datalist make an error.(Object reference is non-static) like This.

Er. Puneet Goel 18-Nov-16 5:59am

As you are able to hit your webmethod, thread is closed. Please create new question for this issue.

Member 12857356 18-Nov-16 5:58am

Why Itz Happen.Am sry Am i Disturbing You,And Am new to Asp.net,Ajax tatz Y am raising So much Of Question.