jQuery Simple Slider，具有最小值和最大值

Question

我是PHP和脚本语言的新手。我试图设置一个滑块，其中包含滑块的最小值和最大值。我希望即使移动滑块也能显示最小值和最大值。这是我到目前为止的代码。

<?php     
$i = 1;
while (++$i <= $_SESSION['totalcolumns']) {
    $range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];
    echo '<input type="text"
                 data-slider="true"
                 data-slider-range="', $range, '"
                 data-slider-step="1"/>';
}
?> 

上面的代码显示如下滑块。

在上面的代码中，我尝试添加下面一行，希望显示最小值和最大值。

data-slider-min = "',$_SESSION["min-column-$i"],'" 
data-slider-max = "',$_SESSION["max-column-$i"], '"

但是，上述行不会在滑块的左侧和右侧显示最小值和最大值。我相信这些值是使用javascript（滑块的范围值）设置的。这是我到目前为止的javascript代码。

<script>
$("[data-slider]")
    .each(function () {
    var input = $(this);
    $("<span>")
        .addClass("output")
        .insertAfter($(this));
    })
    .bind("slider:ready slider:changed", function (event, data) {
    $(this)
        .nextAll(".output:first")
        .html(data.value.toFixed(3));
    });
</script>

有人可以告诉我如何在滑块的左侧和右侧显示最小值和最大值？

Answer 1

首先在css中放置这种风格：

[class^=slider] { display: inline-block; margin-bottom: 30px; }
.range, .output {
    color: #888;
    font-size: 14px;
    margin: 0 5px 0 5px;
    vertical-align: top;
}

比你需要修改你的javascript：

<script>
    $("[data-slider]")
        .each(function () {
            var range;
            var input = $(this);
            $("<span>").addClass("output")
                .insertAfter(input);
            range = input.data("slider-range").split(",");
            $("<span>").addClass("range")
                .html(range[0])
                .insertBefore(input);
            $("<span>").addClass("range")
                .html(range[1])
                .insertAfter(input);
        })
        .bind("slider:ready slider:changed", function (event, data) {
            $(this).nextAll(".output:first")
                .html(data.value.toFixed(2));
        });
</script>

此滑块后，此截图如下：
PS ：对于此示例，使用了this question中的代码和 data.csv 。
更新：此示例的完整代码：pastebin link。