Monday, March 26, 2012

Change AJAX Slider maximum

Hi:

Is there any easy way to change the Maximum values on a slider control dynamically using Javascript.

I have an application that uses one slider to set the maximum on another slider.

Thanks for any help.

Floydo

Try this:

this.SliderExtender1.Maximum -= 2;this.SliderExtender1.Minimum += 2;// Display max and min values.this.Label1.Text =this.SliderExtender1.Maximum.ToString();this.Label2.Text =this.SliderExtender1.Minimum.ToString();

HTH

Jonathan.


Hi Floydo,

Here is an example that increase the maximum value of slider by 10 using javascript. Please try it:

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="SliderExtender.aspx.cs" Inherits="AjaxToolKit_SliderExtender" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.myclass {position:relative; background:url("../images/slider_h_rail.gif") repeat-x; width:100px;height:100px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<input type="button" value="Click" onclick="changeLength();" />
</div>
<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
<ajaxToolkit:SliderExtender BehaviorID="slider" ID="SliderExtender1" runat="server" TargetControlID="TextBox1" Minimum="0" Maximum="100" RaiseChangeOnlyOnMouseUp="true" Steps="5" RailCssClass="myclass" HandleImageUrl="../images/edit.gif">
</ajaxToolkit:SliderExtender>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></form>
<script type="text/javascript">
function changeLength()

{

var slider = $find("slider");
var max = slider.get_Maximum();
slider.set_Maximum(max + 10);

}
</script>
</body>
</html>

Hope this helps.

No comments:

Post a Comment