jquery slider not showing sliders after moved and beginning value

I am trying to get a time slider to work in my mvc4 app. The slider window will appear when clicking in the field but the sliders stay at the starting point. If I click along the slider the value in the textbox changes but the slider handle never moves from the start. I am using this add-on. I can't figure out why the handles will not move when I change the value or reflect the starting value.

I have my Time Editor Template as follows:

@model Nullable<TimeSpan>

@{
    TimeSpan? ts = null;
    if (Model != null)
    {
        ts = (System.TimeSpan)Model;

    }


    @Html.TextBox("", String.Format("{0:hh\\:mm}", ts), new { @class = "timefield", type = "time"  })
}

Then I am including this javascript file.

$(function () {
    $(".timefield").timepicker();
});

My page includes the following Javascript:

<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-migrate-1.1.1.js"></script>

<script src="/Scripts/jquery-ui-1.10.3.js"></script>

<script src="/Scripts/jquery-ui-timepicker-addon.js"></script>
<script src="/Scripts/DatePickerReady.js"></script>
<script src="/Scripts/TimePickerReady.js"></script>


<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

The HTML generated by the editor template on the page is as follows:

<input name="ArrivalSceneTime" class="timefield hasDatepicker" id="ArrivalSceneTime" type="time" value="15:30"/>

Any help would be much appreciated.

Solution

This code works perfectly for me:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
    <style>
        /* css for timepicker */
        .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
        .ui-timepicker-div dl { text-align: left; }
        .ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
        .ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
        .ui-timepicker-div td { font-size: 90%; }
        .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

        .ui-timepicker-rtl{ direction: rtl; }
        .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
        .ui-timepicker-rtl dl dt{ float: right; clear: right; }
        .ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }
    </style>
    <script>
        $(document).ready(function() {
            $("#test").timepicker();
        });
    </script>
    </head>
    <body>
        <div>
            <input id="test" name="test" type="text" value="15:30" />
        </div>
    </body>
</html>

Also, why did you make it type=time? It works fine as a text and does not add the extra arrows that are unnecessary with this add-on.

If you need 12 hour intervals with AM and PM, you can change it to this:

$("#test").timepicker({
    timeFormat: "hh:mm tt"
});