带有最小值和最大值的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简单滑块

回答

相关问题