Struggling to find a solution for this issue. Seeking some assistance.
My goal is to create a basic volume slider.
So, the orange section represents my volume slider.
This is the jQuery code I am using:
var mouseIsDown = false;
$("#volSlider").on("mousedown", function() { mouseIsDown = true; });
$("#volSlider").on("mouseup", function() { mouseIsDown = false; });
$("#volSlider").on("mouseleave", function() { mouseIsDown = false; });
$("#controlVolume").on("mousemove", function(event)
{
if (mouseIsDown == true)
{
var caretPositionFromTop = $("#volCaret").position().top;
var areaHeight = $("#volSlider").height();
var volume = (caretPositionFromTop / areaHeight) * 100;
volume = Math.round(volume);
$("#volCaret").css("bottom", volume);
$("#volText").text(volume);
if (volume <= 100 && volume >= 0)
{
// To be continued.
}
}
});
Edit: Here is the HTML structure for reference:
<div id="controlVolume">
<div id="volSlider">
<div id="volCaret"></div>
</div>
<div id="volText"></div>
</div>
When trying to drag the caret upwards, it only goes up to "1" and stops. Is there something I'm overlooking? Any help is appreciated. Thank you.