jquery移动范围滑块，当它达到最大值加+号时

Question

我想知道如何在Jquery Mobile范围滑块中添加加号（+），当选择/命中最大值时，该滑块的值越高。例如，在价格最高范围内，当选择最大值时，它具有+。

我尝试更改最大值<input type="range" name="range-1b" id="range-1b" min="400" max="2000+" value="1500" step="50">它不起作用，也试图用脚本来改变它，但它也不起作用。不确定是否可以这样做。

  <script>
  $(document).on('pageshow',function(){
    var value = document.getElementById("range-1b").value;
    if(value =2000){
     document.getElementById("range-1b").value="2000+";
    }
  });
  </script>

Answer 1

当jQM增强范围滑块时，输入设置为type="number"。此类型只接受数字，因此不能将文本"100+"设置为输入值。

一种解决方法可能是在100:旁边放置一个"+"

在范围滑块标记中，添加一个具有labelPlus:类的<span>

<div data-role="rangeslider">
    <label for="range-1a">Rangeslider:</label>
    <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40" />
    <label for="range-1b">Rangeslider:</label>
    <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80" />
    <span class="labelPlus">+</span>
</div>

使用labelPlus类CSS最初隐藏跨度，并将其绝对定位在正确的位置：

.labelPlus{
    display: none;
    position: absolute;
    right: 0px;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    width: 12px;
    line-height: 30px;
    margin-right: 18px;
    margin-top: 0px;
}

在javascript中，处理高输入的更改事件，并检查我们是否处于100。如果是，则显示加号跨度，否则隐藏：

$("#range-1b").on("change", function(){
    var val = $(this).val();
    if (parseInt(val) >= 100) {
        $(".labelPlus").show(); 
    } else {
        $(".labelPlus").hide();
    }
});    

演示

Answer 2

您需要使用ochange事件来实现这一点。

我自己用Jquery UI中的默认值做了它。查看

$(function () {
      $("#slider-range").slider({
          range: true,
          min: 0,
          max: 500,
          values: [75, 300],
          slide: function (event, ui) {
              console.log($("#amount").val());
              //console.log($("#amount").text());
              var dol = getSecondPart($("#amount").val());
              if (ui.values[1] == '500') {
                  if (dol == ' $499' || dol == ' $500+') {
                      $("#amount").val("$" + ui.values[0] + " - $" + "500+");
                  }
              }
              else {
                  $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
              }
          }
      });
      $("#amount").val("$" + $("#slider-range").slider("values", 0) +
        " - $" + $("#slider-range").slider("values", 1));
  });
  function getSecondPart(str) {
      return str.split('-')[1];
  }

看看小提琴版

http://jsfiddle.net/cwfL3agn/