帶有最小值和最大值的jQuery簡單滑塊

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：對於本示例使用的代碼和來自的data.csv 210。
更新：此示例的完整代碼：pastebin link。