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

我是PHP和腳本語言的新手。我正在嘗試爲滑塊設置滑塊的最小值和最大值。我希望即使在移動滑塊時也能顯示最小值和最大值。這是迄今爲止的代碼。帶有最小值和最大值的jQuery簡單滑塊

<?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"/>'; 
} 
?>

上面的代碼顯示如下所示的滑塊。

enter image description here

在上述一段代碼，我嘗試添加下面的片希望的最小和最大值將得到的顯示行。

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>

有人可以讓我知道如何顯示在滑塊的左側和右側的最小值和最大值？

來源

2013-10-02 ram esh

我猜你正在使用jQuery簡單滑塊。目前不支持你想要做的事情，但是它有一個突出的功能請求。此時您唯一的選擇是將代碼分叉到GitHub上，並在現在需要時添加該功能。 https://github.com/loopj/jquery-simple-slider –

如果這是JQuery簡單滑塊，比這應該工作。看看[他們的演示]（http://loopj.com/jquery-simple-slider/demo.html）。範圍功能實施和工作。 –

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

來源

2013-10-04 09:26:13

感謝您的答案。我能夠成功查看最小值和最大值。但是，我無法在最小值的同一行中看到範圍和最大值。 –

例如，我沒有得到如截圖中的輸出。但是，我在第二行中得到10 7.00而不是3本身的第一行。 –

檢查標記。然後從[github]（https://github.com/loopj/jquery-simple-slider/tree/）檢查最新版本的** simple-slider.css **，** simple-slider-volume.css **主/ CSS）。在[pastebin示例]（http://pastebin.com/aqJ2PZir）中包含css樣式。如果這沒有幫助，似乎有某種瀏覽器不兼容。這個截圖是使用Firefox 17.0.9製作的。 –

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

回答

相關問題