javascript - 带有最小值和最大值的jQuery Simple Slider

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

有人可以让我知道如何在滑块的左侧和右侧显示最小值和最大值吗？

最佳答案

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。