fatt101 fatt101 - 6 months ago 9
Javascript Question

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

Answer

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.

Comments