DropDown with Ajax Slider

Recently I was migrating a Wordpress site into ASP.Net site and there was a control which was JQuery range slider which was bound to a dropdown with Dates.  I was so tempted to copy the code as everything else from the site. However, there was a small problem. Wordpress sites by default have support for HTML5 and hence the wordpress site could add HTML5 Range control I could inot as my site should support HTML4.

Hence I had to come up with different solution and Microsoft Ajax was there to help.

We will create a control which will have all browser support.

Things we will need.

1. Microsoft Ajax controls specifically silder.

2. JQuery

3. ASP.Net (this can be PHP as well!)

STEP 1.

Add a asp drop down for the date to the page and add Microsoft Ajax to the page.  These two should work independently.

For this example we will scroll through 100 date so populate the dropdown with 100 dates.

also we will set the Ajax slider Min=0 and Max=100 for simplicity.

<h3>Ajax Slider Example</h3>
<asp:Panel runat="server" ID="DemoPanel">
<asp:DropDownList runat="server" ID="DateDropDownList" ClientIDMode="Static">

</asp:DropDownList>
<asp:TextBox runat="server" ID="DateTextBox" CssClass="datetextbox" />

<asp:TextBox runat="server" ID="DateTextBoxSlider"/>
<ajaxToolkit:SliderExtender BehaviorID="SampleExtender" BoundControlID="DateTextBox"
TargetControlID="DateTextBoxSlider" Maximum="100" Minimum="0" runat="server" />

And the server side population for Dropdown

var futureDate = DateTime.Today.AddDays(100);
var date = DateTime.Today;
var iterator=0;
while (date<= futureDate)
{
DateDropDownList.Items.Add(new ListItem() { Text = date.ToString("yyyy-MM-dd"), Value = iterator.ToString() });
date =date.AddDays(1);
iterator++;
}

our basic page is ready.

STEP 2.

We need to hide the text box linked with slider handle. Since we already have a class for this text for we will hide using css.

.datetextbox {
display:none;
}

STEP 3. Now we will hook up visible Dropdown and the Ajax slider with JQuery.

<script type="text/javascript">
function OnDaysChanged(sender, e) {
var id = $find("SampleExtender").get_Value();
$('#DateDropDownList option:eq(' + id + ')').attr('selected', 'selected');
}

$(document).ready(function () {
var slider = $find('SampleExtender');
slider.add_valueChanged(OnDaysChanged);

$("#DateDropDownList").change(function() {
$find("SampleExtender").set_Value($("#DateDropDownList :selected").index());
});
});
</script>

OnDaysChanged: is the method to handle the Slider event. this is fired when user moves the handle.

We will change the dropdown value in this event.

$("#DateDropDownList").change: event is fired when user selects something in the dropdown . we will change the position of the handle in this event.

we will hook up these two events in the onReady event.

Important points to note is,  we should always use "set_Value" method to change the value of the slider.