3

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

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

4

1 回答 1

2

在这种风格的 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>

在此滑块之后，屏幕截图将如下所示： jQuery-Simple-Slider
PS：对于此示例，使用了此问题中的 code 和data.csv。
更新：此示例的完整代码：pastebin 链接.

于 2013-10-04T09:26:13.603 回答