I have successfully implemented the ValueChanged clientevent to capture the value of hte slider and put it in a text box... this works great when i know the ID of the text box at design time. However, I'm encapsulating the slider in a compositeControl and need to figure out a way to get the clientID of the textbox at runtime for the slider (there are many of these composite controls on the page so I can't use a static value)
normally i would render out the call to the javascript and put in the client id, but because you have "wrappered" the valuechanged event and force me to only have 2 arguments (this, events) I can't do that.
Is there any way to override the javascript function call and add my own parameters and still have access to the values in the control?
i hope this makes sense.
thanks
Hi Bhaskar,
To update slider from textbox, you may use exactly same approach as with updating textbox from slider. The only difference, that you should use straight browser's events and update javascript object instead of html element. Below is example.
<script type="text/javascript"> function updateMySlider() { var tb = $get('<%=TextBox1.ClientID%>'); var slider = $find('<%=WebSlider1.ClientID%>'); var val = parseInt(tb.value); if('' + val != 'NaN') slider.set_value(val); } function updateMyTextBox(slider) { var tb = $get('<%=TextBox1.ClientID%>'); tb.value = slider.get_value(); } </script> <ig:WebSlider ID="WebSlider1" runat="server"> <ClientEvents ValueChanged="updateMyTextBox" /> </ig:WebSlider> <asp:TextBox ID="TextBox1" runat="server" onkeyup="updateMySlider()"></asp:TextBox>
Hi,
The above snippet works great. However How to set the value from Text box to the web slider at client side.
I mean On key press of textbox, the webslider values needs to be set based on Text box value at client side.
Please suggest how to achieve this in java script.
e.g: Web Slider Range(0-1000)
I have a default value of 20 in text box control. On key press of text box if the user types 200, set the value(i.e 200) in webslider at client side.
Thanks,
Bhaskar
To get access to any html control on page, you may use document.getElementById or its shortcut $get.If you do not know exact value of ClientID, then you may use <%=Control.ClientID%>.
Below is example:
<script type="text/javascript">function valueChanged(slider, eventArgs){ var tb1 = $get('<%=TextBox1.ClientID%>'); if(tb1) tb1.value = eventArgs.get_newValue();}</script>