Question

我试图在一个地方制作3到4个滑块我的滑块移动正常但滑块值移动不正确，如果我移动第一个滑块然后值应该更改为第一个滑块，在我的情况下值正在改变对于第三个滑块。

这是我的jsfiddle：https://jsfiddle.net/oe3ew6q9/和摘录

编辑注意：代码段不起作用，因为它使用了Twitter引导程序，我把它放在一个片段中以便于阅读

// (not needed for snippet, but normally used) $(document).ready(function() {

var $element = $('input[type="range"]');
var $handle;

$element.rangeslider({
  polyfill: false,
  onInit: function() {
    $handle = $('.rangeslider__handle', this.$range);
    updateHandle($handle[0], this.value);
    $("#amount-label").html('<span class="pricing__dollar">€</span>' + this.value);
  }
}).on('input', function() {
  updateHandle($handle[0], this.value);
  $("#amount-label").html('<span class="pricing__dollar">€</span>' + this.value);
});

function updateHandle(el, val) {
  el.textContent = val;
}

$('input[type="range"]').rangeslider();

/* Price slider */

.rangeslider,
.rangeslider__fill {
  display: block;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.rangeslider {
  background: #e6e6e6;
  position: relative;
}

.rangeslider--horizontal {
  height: 1px;
  width: 100%;
}

.rangeslider--disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

.rangeslider__fill {
  background: #de2d40;
  position: absolute;
}

.rangeslider--horizontal .rangeslider__fill {
  top: 0;
  height: 100%;
}

.rangeslider__handle {
  background: #de2d40;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  width: 5.2em;
  height: 2.2em;
  position: absolute;
  -moz-border-radius: 22px;
  -webkit-border-radius: 22px;
  border-radius: 22px;
  line-height: 2.2em;
  text-align: center;
}

.rangeslider__handle:before {
  font-family: 'Glyphicons Halflings';
  content: "\e079";
  font-size: 11px;
  opacity: 0.5;
  margin: 0 3px;
  color: #fff;
  display: block;
  position: absolute;
  top: 0;
  left: 5px;
  bottom: 0;
}

.rangeslider__handle:after {
  font-family: 'Glyphicons Halflings';
  content: "\e080";
  font-size: 11px;
  opacity: 0.5;
  margin: 0 3px;
  color: #fff;
  display: block;
  position: absolute;
  top: 0;
  right: 5px;
  bottom: 0;
}

.rangeslider--horizontal .rangeslider__handle {
  top: -15px;
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}

input[type="range"]:focus+.rangeslider .rangeslider__handle {
  -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="margin-top: 40px;">
  <div class="row text-center">
    <div class="row">
      <div class="col-xs-10 col-xs-offset-1">
        <!-- As seen here https://bootsnipp.com/snippets/featured/bootstrap-pricing-slider-donations -->
        <input id="range-slider1" type="range" min="0" max="1000" step="5" value="0">
      </div>
    </div>
  </div>
</div>
<div class="container" style="margin-top: 40px;">
  <div class="row text-center">
    <div class="row">
      <div class="col-xs-10 col-xs-offset-1">
        <!-- As seen here https://bootsnipp.com/snippets/featured/bootstrap-pricing-slider-donations -->
        <input id="range-slider2" type="range" min="0" max="1000" step="5" value="0">
      </div>
    </div>
  </div>
</div>
<div class="container" style="margin-top: 40px;">
  <div class="row text-center">
    <div class="row">
      <div class="col-xs-10 col-xs-offset-1">
        <!-- As seen here https://bootsnipp.com/snippets/featured/bootstrap-pricing-slider-donations -->
        <input id="range-slider3" type="range" min="0" max="1000" step="5" value="0">
      </div>
    </div>
  </div>
</div>

Answer 1

您的问题是updateHandle()功能，因为您的$handle是错误的selector并且仅引用最后一个元素而不是所有滑块，因此您需要找到each滑块这样：

$thisrange = $(this)[0].id; // get slider unique id
$thisrangev = $(this)[0].value; // get value

用以下内容更新文字：

$('#'+$thisrange).siblings('.rangeslider').find('.rangeslider__handle').text($thisrangev);

<强> Working Fiddle

最大最大滑块值在另一个滑块上跳跃

1 个答案: