DropDown with Ajax Slider

I was migrating a WordPress site into an ASP.NET site that had a jQuery range slider bound to a date dropdown. I wanted to reuse the existing approach, but the original site relied on the HTML5 range control, which was not an option for a site that needed to support HTML4. Microsoft Ajax provided another way to build a control with broad browser support.

For this example, you will need the Microsoft Ajax Control Toolkit slider, jQuery, and ASP.NET (PHP would work too).

Step 1: Add the dropdown and slider

Add an ASP.NET dropdown and the Microsoft Ajax controls to the page. Populate the dropdown with 100 dates and set the slider minimum to 0 and maximum to 100.

<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" />
</asp:Panel>

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

Step 2: Hide the slider's bound textbox

The textbox linked to the slider handle is not needed in the visible interface, so hide it with CSS:

.datetextbox {
  display: none;
}

Step 3: Keep the dropdown and slider in sync

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

OnDaysChanged handles the slider event and updates the dropdown when the handle moves. The dropdown change event sets the slider position. Hook both events up when the document is ready. Use set_Value to change the slider value.