Client side, grab value of 2 sliders using javascript

3 posts, 0 answers
  1. Anup
    Anup avatar
    4 posts
    Member since:
    Feb 2011

    Posted 14 Feb 2011 Link to this post

    http://demos.telerik.com/aspnet-ajax/slider/examples/rangeslider/defaultcs.aspx

    SelectionStart: $0
    SelectionEnd: $300


    I am trying to do something like the example on the link does. Use a range slider and update the selectionstart and selectionend. without doing a postback.
    How can I do this? I have tried using :

    This does not work since get_oldValue()  brings back the old value regardless of whether left or right handle is dragged.


    function HandlePassengerValueChanged(sender, eventArgs) {
                         var myval = sender._selectionEnd;
                         if (eventArgs.get_oldValue() == $('#<%= lblPassengerNoStart.ClientID %>').html()) {
                             $('#<%= lblPassengerNoStart.ClientID %>').html(myval);
                         }
                         else  {
                             $('#<%= lblPassengerNoEnd.ClientID %>').html(myval);
                         }
                     }

    tried:
    1. var activeHandle = sender.get_activeHandle();
    2. sender._valueOnSlideStart
    3. var myval = sender.get_value();
    .
    .
    . and lot mor options without any luck.

    I have spent hours on this now. Please help.

    Regards
    Anup
  2. John Colclough
    John Colclough avatar
    4 posts
    Member since:
    Nov 2009

    Posted 14 Feb 2011 Link to this post

    Hi Anup, I used the following javascript function to do this just;

    function OnClientSlideEnd(sender, args) {
        document.getElementById('lblSelectionStart').innerHTML = sender.get_selectionStart();
        document.getElementById('lblSelectionEnd').innerHTML = sender.get_selectionEnd();
    }

    I got rid of the server side function RadSlider1_ValueChanged and turned autopostback off.

    <telerik:RadSlider runat="server" ID="RadSlider1" IsSelectionRangeEnabled="true"
        MinimumValue="0" MaximumValue="300" SmallChange="1" SelectionStart="0" SelectionEnd="300"
        OnClientValueChanging="OnClientValueChanging"
        OnClientSlideStart="OnClientSlideStart" OnClientSlideEnd="OnClientSlideEnd"
        ShowDecreaseHandle="false" ShowIncreaseHandle="false" />
    SelectionStart: $<asp:Label ID="lblSelectionStart" runat="server" Text="0"></asp:Label><br />
    SelectionEnd: $<asp:Label ID="lblSelectionEnd" runat="server" Text="300"></asp:Label>

    It worked for me just locally and was updating the label values without posting back. This code I copied from the telerik demo link you gave, I just stripped some of it out because it wasn't relevant,

    hope this helps,
    regards,
    John Colclough.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Anup
    Anup avatar
    4 posts
    Member since:
    Feb 2011

    Posted 15 Feb 2011 Link to this post

    Thanks a lot John! That Worked :)

Back to Top