使用英寸的jquery ui滑块

时间:2012-08-31 12:47:57

标签: jquery html jquery-ui jquery-ui-slider

enter image description here

我需要使用带有英寸的Jquery UI Slider。

我知道如何让滑块使用标准数字,例如:0到100,但我不确定如何让英寸工作。

我假设需要额外的计算 - 也许。

有关如何使这个工作的任何建议吗?

1 个答案:

答案 0 :(得分:4)

这是应该让你开始的东西:

function toFeet(n) {
    return Math.floor(n / 12) + "'" + (n % 12) + '"';
}

$(function () {
    $("#slider").slider({
        min: 55,
        max: 85,
        values: [60, 80],
        range: true,
        slide: function(event, ui) {
            // ui.values[0] and ui.values[1] are the slider handle values.
            $("#result .min").html(toFeet(ui.values[0]));
            $("#result .max").html(toFeet(ui.values[1]));
        }
    });
});​

您需要做的就是将滑块的最小值和最大值转换为英寸。滑动滑块时,您可以通过简单的转换显示英尺和英寸(在toFeet方法中实现)。

示例: http://jsfiddle.net/andrewwhitaker/4extL/57/