Set Value and Position of Range Slider with Ionic - html

Question

Hy,
I am using the Ionic Framework for App Development and i would like to track the time of a song with a Range Slider. I can see the value changes correctly int the developer tools, but the value gets not applied to the visual representation of the slider. Is it even possible to do that?
part of my js code so far:
var duration, playerWasPaused;
var blockSeek = false;
var player;
var seekBar;
var url = 'http://xx.mp3';
function init(){
console.log('Init');
player = new Audio();
player.src = url3;
player.oncanplay = PreparePlay;
player.volume = 0.2;
player.currentTime = 0;
seekBar = $('#playerRange');
player.play();
}
function PreparePlay(){
$("#playerRange").attr("min", 0);
$("#playerRange").attr("max",player.duration);
if(seekBar){
createSeekBar(player, seekBar);
}
}
function createSeekBar(seekBar){
player.addEventListener('loadedmetadata', enableDisableSeekBar, false);
player.addEventListener('emptied', enableDisableSeekBar, false);
player.addEventListener('timeupdate', onTimeupdate, false);
player.addEventListener('input', onSeek, false);
player.addEventListener('change', onSeekRelease, false);
enableDisableSeekBar();
onTimeupdate();
}
function enableDisableSeekBar(){
duration = player.duration;
if(duration && !isNaN(duration)){
seekBar.max = duration;
seekBar.disabled = false;
} else {
seekBar.disabled = true;
}
}
function onSeek(){
if(!blockSeek){
blockSeek = true;
playerWasPaused = player.paused;
player.pause();
}
player.currentTime = seekBar.value;
}
function onSeekRelease(){
if(!playerWasPaused){
player.play();
}
blockSeek = false;
}
function onTimeupdate(){
if(!blockSeek){
seekBar.attr("value", player.currentTime);
}
}
Source: http://jsfiddle.net/trixta/MfLrW/

Answer 1

I solved my problem with this call
seekBar.val(player.currentTime);
in the onTimeupdate.