jQuery 滑块。需要滑块显示 15 分钟增量并显示小时而不仅仅是分钟答案

【问题标题】：Jquery Slider. Need slider to show 15 min increments and show hours not just minutesjQuery 滑块。需要滑块显示 15 分钟增量并显示小时而不仅仅是分钟
【发布时间】：2013-10-10 17:56:15
【问题描述】：

我有一个 jquery 滑块来选择以 15 分钟为增量的时间量。我需要在滑动时从 15 分钟到 1 小时，依此类推，直到 8 小时。我尝试了很多我在网上找到的例子，但都没有成功。现在我的滑块只是以 15 个 int 为增量，最多 480 分钟。任何帮助或其他想法将不胜感激。提前致谢。

源代码

  <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>

【问题讨论】：

标签： c# jquery asp.net jquery-ui-slider

【解决方案1】：

如果您需要将分钟的值格式化为小时和分钟，您可以像这样进行数学运算：

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

小提琴示例：http://jsfiddle.net/9vPrW/2/

【讨论】：

感谢工作就像魅力！感谢您快速而有帮助的回复。

【解决方案2】：

将step 的值从15 更改为60，同时初始化滑块以增加时间，每个增量为1 小时。
此外，要以小时为单位显示值，您需要将分钟值除以 60。

例如：.val(parseInt($("#slider-range-max").slider("value"))/60);

【讨论】：