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

Set radslider value through javascript

10 Answers 252 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Benno
Top achievements
Rank 1
Benno asked on 10 Jul 2007, 03:47 PM
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.

10 Answers, 1 is accepted

Sort by
0
Benno
Top achievements
Rank 1
answered on 10 Jul 2007, 07:25 PM

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



 

0
Valentin.Stoychev
Telerik team
answered on 11 Jul 2007, 05:30 AM
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
0
bogdan
Top achievements
Rank 1
answered on 21 Mar 2009, 05:52 PM
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 ?
0
Tervel
Telerik team
answered on 23 Mar 2009, 03:30 PM
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.
0
sreelatha bora
Top achievements
Rank 1
answered on 22 Apr 2010, 04:27 AM
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));

 

}

0
Tsvetie
Telerik team
answered on 27 Apr 2010, 12:53 PM
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.
0
Mk
Top achievements
Rank 1
answered on 27 Oct 2012, 09:14 AM
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));
           }
0
Princy
Top achievements
Rank 1
answered on 29 Oct 2012, 11:47 AM
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.
0
Jameer Baba
Top achievements
Rank 1
answered on 27 Aug 2013, 08:36 PM
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  


 

0
Slav
Telerik team
answered on 30 Aug 2013, 03:42 PM
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.
Tags
Slider
Asked by
Benno
Top achievements
Rank 1
Answers by
Benno
Top achievements
Rank 1
Valentin.Stoychev
Telerik team
bogdan
Top achievements
Rank 1
Tervel
Telerik team
sreelatha bora
Top achievements
Rank 1
Tsvetie
Telerik team
Mk
Top achievements
Rank 1
Princy
Top achievements
Rank 1
Jameer Baba
Top achievements
Rank 1
Slav
Telerik team
Share this question
or