This is a migrated thread and some comments may be shown as answers.

Client side, grab value of 2 sliders using javascript

2 Answers 54 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Anup
Top achievements
Rank 1
Anup asked on 14 Feb 2011, 07:45 PM
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 Answers, 1 is accepted

Sort by
0
John Colclough
Top achievements
Rank 1
answered on 14 Feb 2011, 08:22 PM
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.
0
Anup
Top achievements
Rank 1
answered on 15 Feb 2011, 10:46 AM
Thanks a lot John! That Worked :)

Tags
Slider
Asked by
Anup
Top achievements
Rank 1
Answers by
John Colclough
Top achievements
Rank 1
Anup
Top achievements
Rank 1
Share this question
or