Set radslider value through javascript

[Benno]

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.

[Benno]

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'));

 

[Valentin.Stoychev]

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

[bogdan]

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 ?

[Tervel]

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.

[sreelatha bora]

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));

 

}

[Tsvetie]

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.

[Mk]

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));
           }

[Princy]

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.

[Jameer Baba]

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  

 

[Slav]

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