引导程序滑块范围在拖动时更新

时间:2019-01-16 04:59:09

标签: jquery twitter-bootstrap

我正在使用引导滑块http://seiyria.com/bootstrap-slider/,我想根据滑块的拖动来更新和增加每个突出显示的值,每个突出显示的值以不同的数字递增。 (拖动条从1到200,然后递增1)。

请帮助

$(".slider-txt:input").inputmask({
  alias: 'numeric',
  groupSeparator: '.',
  allowPlus: true,
  allowMinus: true,
  radixPoint: ',',
  autoGroup: true,
  digits: '0',
  digitsOptional: true,
  prefix: '',
  placeholder: '',
  autoUnmask: 'false'
});

$(".slider").each(function() {

  var $sibling = $(this).closest(".slider-container").find(".slider-txt");

  var mySlide `enter code here`
  r = $(this).slider({
    formatter: `enter code here`
    function(value) {
      return '' + value;

    }
  }).on('change', function(data) {

    // on slide did not update on click (jump)
    var newvalue = parseInt($(this).val());
    var oldvalue = parseInt($sibling.val());

    if (oldvalue != newvalue) {
      $sibling.val(newvalue)
    }
  }).data('slider').getValue();

  // set sibling value
  $sibling.val(parseInt($(this).val()));

  $sibling.blur(function() {
    var $sibling = $(this).closest(".slider-container").find("input.slider");
    var newvalue = parseInt($(this).val());
    var oldvalue = parseInt($sibling.val());
    var minvalue = parseInt($sibling.attr("data-slider-min"));
    var maxvalue = parseInt($sibling.attr("data-slider-max"));

    if (newvalue < minvalue) {
      newvalue = minvalue;
      $(this).val(newvalue);
    } else if (newvalue > maxvalue) {
      newvalue = maxvalue;
      $(this).val(newvalue);
    }
    // set slider value
    mySlider.setValue(parseInt(newvalue));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-1">
  <span>1</span>
</div>
<div class="col-9">

  <input class="slider" type="text" data-slider-min="1" data-slider-max="200" data-slider-step="1" data-slider-tooltip="always" data-slider-value="1" />
</div>
<div class="col-2">
  <!-- pattern="\d*" will show numeric keyboard -->
  <input class="form-control text-center slider-txt" type="text" pattern="\d*" data-inputmask="" value="" />
</div>

enter image description here

0 个答案:

没有答案