CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
ggt
ggt

Reputation: 331

jQuery Slider not correctly calculating range

I am trying to slide a div across an image giving at a score of 0-100, unfortunately at the moment it is just going from 0-98.

Now I am sure there is a problem with the following calculation and the way they are interacting with the positioning of my divs, but I'm not sure how to remedy it logically.

Here is plnk + code;

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())
      }
    }

Here is my 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;
}

Hope it's a simple fix,

Thanks all

Upvotes: 1

Views: 42

Answers (1)

Teru
Teru

Reputation: 51

The label's position().left refers to its own initial position, styled with #itemArea { left: 7.5%; }. However, the slider bar is styles with #barContainer { left: 53px; }. Make them identical.

Upvotes: 1

Related Questions