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

ram esh 发表于 Dev

拉姆什

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