I'm having an issue with my volume slider in jQuery - the handle is not showing up despite it working.
Any suggestions on how to make the handle visible?
The jQuery I have imported:
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
Below is the JavaScript code to manage volume changes, along with its HTML and CSS.
$("#volume").slider({
min: 0,
max: 100,
value: 0,
range: "min",
slide: function(event, ui) {
setVolume(ui.value / 100);
}
});
function setVolume(myVolume) {
if (audioElement != undefined) {
audioElement.volume = myVolume;
}
}.audioUtilitiesDiv {
width: 20%;
display: inline-block;
background-color: lightblue;
}
#player {
width: 350px;
height: 50px;
position: relative;
margin: 0 auto;
top: 80px;
i {
position: absolute;
margin-top: -6px;
color: #666;
}
i.fa-volume-down {
margin-left: -8px;
}
i.fa-volume-up {
margin-right: -8px;
right: 0;
}
}
#volume {
position: absolute;
left: 24px;
margin: 0 auto;
height: 5px;
width: 300px;
background: #555;
border-radius: 15px;
.ui-slider-range-min {
height: 5px;
width: 300px;
position: absolute;
background: green;
border: none;
border-radius: 10px;
outline: none;
}
.ui-slider-handle {
width: 20px;
height: 20px;
border-radius: 20px;
background: #FFF;
position: absolute;
margin-left: -8px;
margin-top: -8px;
cursor: pointer;
outline: none;
}
} <div class="audioUtilitiesDiv">
<div id="player">
<i class="fa fa-volume-down"></i>
<div id="volume"></div>
<i class="fa fa-volume-up"></i>
</div>
</div>If anyone could provide assistance on this matter, please feel free to reach out. Thank you in advance!