Jquery Slider. Need slider to show 15 min increments and show hours not just minutes

Question

I have a jquery slider to select an amount of time in 15 mins increments. I need this to go from 15mins to 1 hour when sliding and so on until 8 hrs. I have tried many examples i've found online with no success. Right now my slider just goes in 15 int increments up to 480 mins. Any help or other ideas would be appreciated. Thanks in advance.

Source Code

  <script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $("#slider-range-max").slider({
            range: "min",
            min: 0,
            max: 480,
            value: 15,
            step: 15,
            slide: function (event, ui) {
                $("#amount").val(ui.value);
                $("#amount1").val(ui.value);
            }
        });
        if("<%=this.IsPostBack%>"  === "True")
        {
            $("#amount").val($("#slider-range-max").slider("value"));
            $("#amount1").val($("#slider-range-max").slider("value"));
            $("#txtHiddenAmount").val($("#amount").val()); 
        }

    });

  <label for="amount">Time/Length in Minutes(Slide to Desired Amount, 1 Credit per hour):</label>
                 &nbsp
                <input type="text" id="amount1" readonly="readonly" style="border: 0; color: #f6931f; font-weight: bold;" />  
               <asp:TextBox ID="amount" runat="server" Style="color: white"      BorderWidth="0" ClientIDMode="Static">15</asp:TextBox>   

Answer 1

If you are needing to format the value of minutes into hours and minutes, you can just do the math like this:

var hours = Math.floor(val / 60);
var minutes = val % 60;

Fiddle example: http://jsfiddle.net/9vPrW/2/

Answer 2

Change the step value from 15 to 60 while initializing the slider to increase time in increments of 1 hour each.
Also, to display the value in hours, you'll need to divide the minutes value by 60.

Eg : .val(parseInt($("#slider-range-max").slider("value"))/60);