Question

我在页面上使用两个范围滑块，我希望这两个滑块相互依赖。

我的第二个滑块永远不能包含比第一个滑块更低的值，它应该从第一个滑块上选择的内容开始。

我试图改变自己，以下是我到目前为止：https://codepen.io/anon/pen/xrOQeM

    $(document).ready(function () { 

    var input1 = $("input").val();
    console.log(input1); 

    var input2 = $("#second");
    $("#second").attr("min",input1);

    alert(input2);
});

Answer 1

将它放在你的js文件中。它应该工作。或者按照这个例子。 https://codepen.io/ayang10/pen/BZzEWZ

var valueBubble = '<output class="rangeslider__value-bubble" />';

var rangeSlider1 = $('#first');
var rangeSlider2 = $('#second');

function updateValueBubble(pos, value, context) {
  pos = pos || context.position;
  value = value || context.value;
  var $valueBubble = $('.rangeslider__value-bubble', context.$range);
  var tempPosition = pos + context.grabPos;
  var position = (tempPosition <= context.handleDimension) ? context.handleDimension : (tempPosition >= context.maxHandlePos) ? context.maxHandlePos : tempPosition;

  if ($valueBubble.length) {
    $valueBubble[0].style.left = Math.ceil(position) + 'px';
    $valueBubble[0].innerHTML = value;
  }
}

rangeSlider1
  .rangeslider({
    polyfill: false,
    onInit: function() {
     this.$range.append($(valueBubble));
     updateValueBubble(null, null, this);
   },
   onSlide: function(pos, value) {
     updateValueBubble(pos, value, this);
   }
  })
  .on('input', function() {
    rangeSlider2[0].value = this.value;
  });

rangeSlider2
  .rangeslider({
    polyfill: false,
    onInit: function() {
     this.$range.append($(valueBubble));
     updateValueBubble(null, null, this);
   },
   onSlide: function(pos, value) {
     updateValueBubble(pos, value, this);
   }
  })


rangeSlider1.on('input', function() {
  rangeSlider2.attr("min", this.value);
  rangeSlider2.rangeslider('update', true);
});

动态更改范围滑块的起始值

1 个答案: