Search code examples
javascriptasp.nettextboxtooltiprangeslider

Value tooltip on asp.net range slider

How can i provide live(client-side) value feedback to the user, on an ASP.Net range-slider(tooltip or label is fine)?

I am fairly new to ASP, so it's probably just something really obvious i'm missing, but couldn't find it searching the internet. I want to provide feedback to the user on the current value of a range slider, as he drags.

I have an ASP.Net Range slider as follows :

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

and that works fine, and it fires the C# code behind after dragging to a new value is complete, as i want.

However, currently the user has no idea of the value he has selected, until after the server as processed the change(In which code i can update a label). So how can i provide live(client side) feedback to the user? Either of these 2 approaches, both common on sliders, will suffice :

  1. Tooltip over the draggy bit(sorry don't know the technical term) as you drag.
  2. Updating label/spam/div with the value, as you drag.
Solution

  • I haven't touched ASP for a long time and never really used it much when I did but assuming your ASP produces or can produce something like this as HTML:

    <input type="range" min="0" max="100" value="100" name="my_range" id="my_range"><span>100</span>

    Then the following jQuery will update the span with the value of the range:

    $('#my_range').on("change mousemove", function() {
    $(this).next().html($(this).val());
});

    Assuming you can use jQuery in your project.