Set radslider value through javascript

11 posts, 0 answers
  1. Benno
    Benno avatar
    2 posts
    Member since:
    Jul 2007

    Posted 10 Jul 2007 Link to this post

    Is it possible to set the radslider value through javascript.  What i am trying to achive is enter the value in the textbox then the slider should set based on the value in the textbox.
  2. Benno
    Benno avatar
    2 posts
    Member since:
    Jul 2007

    Posted 10 Jul 2007 Link to this post

    First i tryed to assign the value as
    document.getElementById('SliderId').value = newValue;
    but it not works.

    So i used $find instead of document.getElementById. Now we can assign the value by the set_Value function.
    eg:
    $find('SliderId').set_Value(parseInt('5'));



     

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 11 Jul 2007 Link to this post

    Hi Benno,

    Yes - this is the correct way to set the Value of the RadSlider.
    Let us know if you face any other problems using our controls.

    Regards,
    Valentin.Stoychev
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. bogdan
    bogdan avatar
    9 posts
    Member since:
    Mar 2009

    Posted 21 Mar 2009 Link to this post

    function updateSlider(newstep)
    {
    var SLIDER = $find("<%= Slider.ClientID %>");
    SLIDER.set_Value(newstep);
    }

    it reply's that there is no such method. what am i doing wrong ?
  6. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 23 Mar 2009 Link to this post

    Hi Bogdan,

    It has been 1 year+ since the Telerik RadControls API was updated to follow MS AJAX client conventions - which use lower casing for "client properties".
    Please try set_value instead.



    Best wishes,
    Tervel
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  7. sreelatha bora
    sreelatha bora avatar
    4 posts
    Member since:
    Mar 2010

    Posted 21 Apr 2010 Link to this post

    Hi,
    how do i set radslider value using javascript.i am getting 'object does not support this method or property error'.below is my javascript.my radslider controls are inside edit from template of radgrid.and i am accessing  those sliders using below method.registeredElements.push('<%# Container.FindControl("RadSliderSeverity").ClientID %>');


    function

     

    GetRpn() {

     

     

    var Severity = GetGridServerElement("RadSliderSeverity", "input");

     

     

    var Frequency = GetGridServerElement("RadSliderFrequency", "input");

     

     

    var Detection = GetGridServerElement("RadSliderDetection", "input");

     

     

    var RPN = GetGridServerElement("RadSliderRPN", "input");

     

     

    var txtRpn = GetGridServerElement("txtTicks", "input");

     

     

    var sevValue;

     

     

    var FreqValue;

     

     

    var DetValue;

     

     

    if (Severity != null) {

     

     

    var Sevvalues = Severity.value;

     

    sevValue = Sevvalues.substr(9, 1);

     

    }

     

    if (Frequency != null) {

     

     

    var Freqvalues = Frequency.value;

     

    FreqValue = Freqvalues.substr(9, 1);

     

    }

     

    if (Detection != null) {

     

     

    var DetValues = Detection.value;

     

    DetValue = DetValues.substr(9, 1);

     

    }

     

    var rpnvalue = ((parseInt(sevValue) + 1) * (parseFloat(FreqValue) + 1) * (parseFloat(DetValue) + 1));

     

    txtRpn.value = rpnvalue;

    RPN.set_value(parseInt(rpnvalue));

     

    }

  8. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 27 Apr 2010 Link to this post

    Hello sreelatha bora,
    You should set the value of the slider control, using its set_value client-side method. The code that you have posted looks correct. That is why I suppose the problem is in the code that you use to get a reference to the slider client object. You should use the $find method, instead of $get. For additional information on the $find method, please refer to MSDN. I suppose you will find the Client-Side Basics topic in our online documentation useful as well.

    Greetings,
    Tsvetie
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  9. Mk
    Mk avatar
    12 posts
    Member since:
    Aug 2012

    Posted 27 Oct 2012 Link to this post

    Hi Tsvetie

    set_value not working i got set_value not a function error.

    Here is my code:-
               var st=$("#txtBonus_text").val();
               if (st <= 2.0) {
                   $('#BonusSlider').set_value(parseInt(st));
               }
  10. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 29 Oct 2012 Link to this post

    Hi Mk,

    You can use $find("<%= SomeControl.ClientID %>") to get reference to client-side objects. Please try the following code snippet to achieve your scenario.

    JS:
    var st = $find("<%= txtBonus_text.ClientID %>").get_value();
    if (st <= 2.0) {
        $find("<%= txtBonus_text.ClientID %>").set_value(parseInt(st));
    }

    Hope this helps.

    Regards,
    Princy.
  11. Jameer Baba
    Jameer Baba avatar
    1 posts
    Member since:
    Aug 2013

    Posted 27 Aug 2013 Link to this post

    1. I have created a .ascx with one image element and one radslider, like below

    <telerik:RadCodeBlock ID="RCB" runat="server">
        <telerik:RadScriptBlock ID="RCBS" runat="server">
            <script type="text/javascript">
     
     
                $(document).ready(function showgraph() {
     
                                        updateSlider(100);
                            });
                     
     
                function updateSlider(newValue) {
                    var refreshFlag = document.getElementById("<%=txtrefreshFlag.ClientID%>").value;
                    if (refreshFlag == "true") {
                        var slider = GetSlider();
                        slider.set_maximumValue(newValue);
                        slider.set_value(newValue);
                    }
                }
     
     
                function GetSlider() {
                    return $find("<%=RadSlider1.ClientID%>");
                }
     
     
     
                function OnClientValueChanged(sender, args) {
                    if (sender.get_maximumValue() == sender.get_value()) {
                        document.getElementById("<%=txtrefreshFlag.ClientID%>").value = "true";
                    }
                    else {
     
                        document.getElementById("<%=txtrefreshFlag.ClientID%>").value = "false";
                        var id = document.getElementById("<%=txtsinglegid.ClientID%>").value;
                        var index = sender.get_value();
                            }
                }
     
         
            </script>
        </telerik:RadScriptBlock>
         
        <table cellpadding="0" cellspacing="0" style="background-color:#AAAAAA">
            <tr style='background-color: #AAAAAA;'>
                <td align='right'>
                    <img src='../Images2/right-up-arrow.png' id='MaxId'
                        title='Click to Maximise' alt='Click to Maximise' runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    <img id="img1" border="0" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    <telerik:RadSlider runat="server" ID="RadSlider1" OnClientValueChanged="OnClientValueChanged"
                         MaximumValue="100" MinimumValue="0" >
                    </telerik:RadSlider>
                </td>
            </tr>
        </table>
    </telerik:RadCodeBlock>
    <input type="text" runat="server" id="txtsinglegid" style="display: none" />
        <input type="text" runat="server" id="txtrefreshFlag" value="true" style="display: none" />

    2.in.aspx page added these controls in a container

    .aspx code :
    <table style="width: auto; text-align: center; vertical-align: middle; padding: 0 0 0 0;">
           <asp:PlaceHolder ID="ControlHolder" runat="server" />
    </table>


    c# code :

    private void LoadPlaceholder(StringBuilder mycontrols)
    {
        PPI.RemoteViewer.V2.POC.UserControls.GraphImage divctrl = new UserControls.GraphImage();
        ControlHolder.Controls.Add(new LiteralControl("<tr>"));
        string[] Graphnos = mycontrols.ToString().Split(',');
        
        foreach (string Graphno in Graphnos)
        {
            divctrl = (PPI.RemoteViewer.V2.POC.UserControls.GraphImage)LoadControl("~/UserControls/GraphImage.ascx");
     
            divctrl.MyGraphID = Graphno.ToString();
            divctrl.ID = Graphno.ToString();
            divctrl.GraphH = Convert.ToInt32(gheight.ToString());
            divctrl.GraphW = Convert.ToInt32(gwidth.ToString());
           
     
            ControlHolder.Controls.Add(new LiteralControl("<td  style='width:" + gwidth + "px;height:" + gheight + "px'>"));
            ControlHolder.Controls.Add(divctrl);
            ControlHolder.Controls.Add(new LiteralControl("</td>"));
     
            Graphcount++;
            GraphstoDisplay();
            if (Graphcount % divider == 0) { ControlHolder.Controls.Add(new LiteralControl("</tr><tr>")); }
             
        }
    }

    3. the $find("<%=RadSlider1.ClientID%>"); in GetSlider function of .ascx code is always returning last initialized controls slider
    therefore the maximum value and value are being only set to the slider of last created control.

    I want to set or get values every individual control's slider.

    Need help. Thanks in advance

    Thanks,
    Jameer  


     

  12. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 30 Aug 2013 Link to this post

    Hi Jameer,

    Please note that when you add several instances of the user control on the page, you will also include several declarations of the function GetSlider as well as the rest of the functions in the user control. Each declaration will refer to the slider in the current user control, however when added on the page the last function definition will override the others since all of them have the same name. This is why only the last slider is modified in your case.

    You can avoid this behavior by creating a unique name for the functions in each user control. This way you will ensure that they will not be overridden when more than one user control is added on the page.

    Regards,
    Slav
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017