Question

我正在使用bootstrap-slider.js（https://github.com/seiyria/bootstrap-slider）来实现范围滑块，如示例2 http://seiyria.github.io/bootstrap-slider/

我有滑块工作，但我不喜欢工具提示，而是希望在滑块的每一端显示上下值，在移动上滑块或下滑块时动态更新它们。我遇到的问题是滑块的值是逗号分隔列表 - 即1,1000（上，下），所以我在滑块的每一端都得到两个值。我需要显示滑块左侧的下限值和滑块右侧的上限值。

到目前为止，我已经使用以下代码将其工作，但它在滑块的每一端都显示了上限和下限值。我试过修剪价值，但无法让它发挥作用。任何人都可以建议我只能在滑块的两端显示一个最大/最小值吗？

我的代码：

HTML：

        <h4 id="search-slider-lower-value">£<span id="search-sliderLowerSliderVal">100</span></h4>
        <input id="search-slider" type="text" class="span2" value="" data-slider-tooltip="hide" data-slider-min="100" data-slider-max="1000" data-slider-step="5" data-slider-value="[100,1000]"/> 
        <h4 id="search-slider-upper-value">£<span id="search-sliderUpperSliderVal">1000</span></h4>

Jquery的：

$("#search-slider").slider();
    $("#search-slider").on("slide", function(slideEvt) {
        $("#search-sliderLowerSliderVal").text(slideEvt.value);
        $("#search-sliderUpperSliderVal").text(slideEvt.value);
    });

Answer 1

值存储在数组中。

$("#search-slider").slider();
$("#search-slider").on("slide", function(slideEvt) {
    $("#search-sliderLowerSliderVal").text(slideEvt.value[0]);
    $("#search-sliderUpperSliderVal").text(slideEvt.value[1]);
});

bootstrap slider - 分别显示上下范围值

1 个答案: