javascript - jQuery Slider 无法正确计算范围

Question

我试图在图像上滑动一个 div，给出 0-100 的分数，不幸的是，目前它只是从 0-98。

现在我确定以下计算以及它们与我的 div 定位交互的方式存在问题，但我不确定如何从逻辑上解决它。

这里是plnk+代码；

https://plnkr.co/edit/oqhrDeP52vdzcKqpQvbl?p=preview

 var position = sliderDiv.position(),
    sliderWidth = sliderDiv.width(),
    minX = position.left,
    maxX = minX + sliderWidth,
    tickSize = sliderWidth / range;

  drop: function(e, ui) {
      var finalMidPosition = $(ui.draggable).position().left + Math.round($(divs).width() / 2);
      if (finalMidPosition >= minX && finalMidPosition <= maxX) {
        var val = Math.round((finalMidPosition - minX) / tickSize);
        sliderDiv.slider("value", val);
        $(".slider-value",ui.draggable).html(val);
        $("#text1").val($(".item1 .slider-value").html())
      }
    }

这是我的 CSS；

#content {
  width: 970px;
  height: 400px;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}

#containment {
  position: absolute;
  width: 1000px;
  right: -15px;
  height: 100%;
}

#itemArea {
  position: relative;
  width: 85%;
  height: 50%;
  top: 10%;
  left: 7.5%;
  float: left;
}

#row {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.itemContainer {
  display: block;
  height: 100%;
  width: 33% !important;
}

.itemContainer:hover {
 z-index: 1;
}

.candle {
  position: relative;
  top: 0;
  width: 5px;
  height: 40px;
  border-width: 0px 0px 5px 5px;
  border-style: solid;
  border-color: transparent rgb(210, 211, 213);
  left: 50%;
  opacity: 1;
}

#barContainer {
  position: absolute;
  bottom: -20px;
  left: 53px;
  width: 80%;
  height:12px;
}
#ratingBar {
  position:absolute;
  width: 865px;
  height: 78px;
  background-color: rgb(210, 211, 213);
  z-index: 1;
}

.item1 {
  display: block;
  height: 80%;
  width: 100%;
  z-index: 1;
    background: #ffffff url("http://i.imgur.com/UFB2GNa.jpg") 50% 50% repeat-x;

}

.item2 {
  display: block;
  height: 80%;
  width: 100%;
  z-index: 1;
    background: #ffffff url("http://i.imgur.com/WWY1gZG.jpg") 50% 50% repeat-x;

}

.item3 {
  display: block;
  height: 80%;
  width: 100%;
  z-index: 1;
    background: #ffffff url("http://i.imgur.com/nF6bQDX.jpg") 50% 50% repeat-x;

}

.item4 {
  display: block;
  height: 80%;
  width: 100%;
  z-index: 1;
    background: #ffffff url("http://i.imgur.com/UC4gDcq.jpg") 50% 50% repeat-x;

}

.item5 {
  display: block;
  height: 80%;
  width: 100%;
  z-index: 1;
    background: #ffffff url("http://i.imgur.com/xBeJXpo.jpg") 50% 50% repeat-x;

}

.item6 {
  display: block;
  height: 80%;
  width: 100%;
  z-index: 1;
    background: #ffffff url("http://i.imgur.com/5u0gUUI.jpg") 50% 50% repeat-x;

}

.ui-widget-content {
  background: #ffffff url("http://i.imgur.com/mnG2sSY.jpg") 50% 50% repeat-x !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  border: none !important;
  background: none !important;
}

希望这是一个简单的修复，

谢谢大家

Answer 1

标签的 position().left 指的是它自己的初始位置，样式为 #itemArea { left: 7.5%; }。但是， slider 的样式为 #barContainer { left: 53px; }。使它们相同。