Please consider the following example. This uses .val() instead of .attr() and will have better results.
$(function() {
var timer;
var start;
function updateDuration(n) {
$(".current").val(n);
$(".duration").val(n);
}
$(".psudeo-player button").click(function() {
$(this).hide();
start = new Date().getSeconds();
timer = setInterval(function() {
var t = Math.floor(new Date().getSeconds() - start);
updateDuration(t);
if (t >= parseInt($(".duration")[0].max)) {
clearInterval(timer);
$(this).show();
}
}, 1000);
});
});
.psudeo-player {
background-color: #555;
border: 1px solid #222;
width: 480px;
height: 340px;
position: relative;
}
.psudeo-player button {
position: absolute;
top: calc(50% - 9px);
left: calc(50% - 30px);
}
.current {
width: 2em;
}
.duration {
width: 430px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="psudeo-player">
<button>Play</button>
</div>
<input type="text" class="current" value="0" disabled><input class="duration" min="0" max="20" type="range" value="0">
I am making a song-player with Howler.js and Javascript/JQuery.
I have an input[type=range] which displays the progress of the song:
<input class="duration" type="range" value="0">
There is a function that executes when the song is played:
onplay: function() {
setInterval(function(){
$('#everytime_we_touch .duration').attr('value', everytime_we_touch.seek());
},1000);
}
This does work and the progress on the input[type=range] visibly changes. However, when I click on the input[type=range] manually, the value-attribute inside of the input[type=range] still changes, but visibly it is stuck. I use this method for manually changing the song-progress:
$('input[type=range].duration').on('input', function () {
let howl_name = $(this).parent().parent().parent().attr('id');
let duration_value = this.value;
eval(howl_name + '.seek(' + duration_value + ')');
});
Thanks in advance
I have the same problem but I am not using JQuery. I use mySlider.setAttribute(‘value’, newVal) which changes the value but the thumb doesn’t move. This only happens after the thumb or track has been clicked. Any idea why or how to fix?
Any idea why val() works better than attr()? I have the same problem as the OP but I am not using JQuery and I’m looking for a solution with plain js.
@MarkM There are seeking different things.
