In customizing a jQuery slider bar from a tutorial by Thoriq Firdaus for use in a Django Python application, I found that the original size and range of the slider were too small for my needs. I needed to set the range to min: -100 and max: +100. Modifying the JS and CSS for the slider to fit these requirements was no problem. However, after resizing the slider, the tooltip no longer aligned or moved along with the slider handle.
Upon inspecting the element using Firebug, I noticed that the tooltip seemed to be stuck within a range of -100px and +100px from the left of the slider. This caused it to lose synchronization with the slider handle when I moved it (see images below).
Slider tooltip positioned at nearly maximum left:
Slider tooltip positioned at the far right:
I attempted various fixes, such as setting a min: and max: range in the JS for the tooltip (which did not work) and adjusting the CSS properties to center and align the tooltip correctly, but to no avail.
Does anyone have insight into how I can make the tooltip move along with the slider handle? Is this change required in the JS code or the CSS styling?
I also tried replicating the issue on a JSFiddle, but encountered difficulties with the appearance of the slider handle.
My HTML Code:
<section>
<span class="tooltip"></span>
<div id="slider"></div>
</section>
My CSS Styling:
#slider{
border-width: 1px;
border-style: solid;
border-color: #333 #333 #777 #333;
border-radius: 25px;
width: 700px;
position: absolute;
height: 13px;
background-color: #8e8d8d;
background: #85837A;
box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5),
0 1px 0 0px rgba(250, 250, 250, .5);
left: 20px;
}
.tooltip {
position: absolute;
bottom: 10px;
display: block;
z-index: 1031;
width: 35px;
height: 20px;
color: #E456ff;
bgcolor: #E456ff;
text-align: center;
font: 10pt Tahoma, Arial, sans-serif ;
border-radius: 3px;
border: 1px solid #333;
box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, .3);
box-sizing: border-box;
background: linear-gradient(top, rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%);
opacity: 1;
filter: alpha(opacity=1);
}
My JavaScript Functionality:
$(function() {
//Store frequently used elements in variables
var slider = $('#slider'),
tooltip = $('.tooltip');
//Hide the tooltip initially
tooltip.hide();
//Initialize the Slider
slider.slider({
min: -100,
max: +100,
value: 0,
start: function(event,ui) {
tooltip.fadeIn('fast');
},
slide: function(event, ui) { //When sliding the slider
var value = slider.slider('value'),
volume = $('.volume');
tooltip.css('left', value).text(ui.value); //Adjust the tooltip position
},
stop: function(event,ui) {
tooltip.fadeOut('slow');
},
});
});