CODEWITHSUNDEEP
jqueryjquery-uisettimeout
Chud37
Chud37

Reputation: 5007

Changing the value of setInterval() with a jQuery UI Slider

How do I do this? I have the following code that changes the background image:

var alt = false;
    var delay = 5000;
    var speed = ((delay / 3)*2);
    var opacity = 1;


    $( "#slider" ).slider({
        orientation: "vertical", 
        range: "true", 
        min: 500, 
        max: 10000, 
        value: delay,
        change: function( event, ui ) {
            delay = ui.value;
        }
    });

    setInterval(function() {
    var r=Math.floor(Math.random()*b.length);
    console.log(delay);
    switch(alt)
    {   case true:
            $('#bg1').css("background-image", "url('"+b[r]+"')");
            $('#bg1').fadeTo(speed,opacity);
            $('#bg2').fadeOut(speed);
        break;
        case false:
            $('#bg2').css("background-image", "url('"+b[r]+"')");
            $('#bg2').fadeTo(speed,opacity);
            $('#bg1').fadeOut(speed);
        break;
    }
    alt = !alt;
    }, delay);

Change the slider should change the variable but it doesn't. I don't know how to change the varible called delay.

EDIT Now I am trying this, but it is not working either, it'll change once when I move the slider:

var alt = false;
            var delay = 1000;
            var speed = ((delay / 3)*2);
            var opacity = 1;
            var h;


            function iSwap() {
                var r=Math.floor(Math.random()*b.length);
                console.log(delay);
                switch(alt)
                {   case true:
                        $('#bg1').css("background-image", "url('"+b[r]+"')");
                        $('#bg1').fadeTo(speed,opacity);
                        $('#bg2').fadeOut(speed);
                    break;
                    case false:
                        $('#bg2').css("background-image", "url('"+b[r]+"')");
                        $('#bg2').fadeTo(speed,opacity);
                        $('#bg1').fadeOut(speed);
                    break;
                }
                alt = !alt;
            }

            h = setInterval(iSwap(), delay);
            $( "#slider" ).slider({
                orientation: "vertical", 
                range: "true", 
                min: 500, 
                max: 10000, 
                value: delay,
                change: function( event, ui ) {
                    delay = ui.value;
                    clearInterval(h);
                    h = setInterval(iSwap(), delay);
                }
            });

Upvotes: 0

Views: 1230

Answers (2)

dualed
dualed

Reputation: 10502

You have to call setInterval(...) again, after changing your variable, like this (truncated)

var handle;
/* -- snip -- */
change: function( event, ui ) {
   delay = ui.value;
   clearInterval(handle);
   handle = setInterval( /* -- snip -- */ , delay);
}
/* -- snip -- */
handle = setInterval( /* -- snip -- */ , delay)

Ideally, to reduce redundant code, you will have to put some part of this in a named function and call that

Upvotes: 1

palaѕн
palaѕн

Reputation: 73906

Try this:

$("#slider").slider({
  orientation: "vertical",
  range: "true",
  min: 500,
  max: 10000,
  value: delay,
  slide: function (event, ui) {
    $("#amount").val(ui.value);
    delay = ui.value
    console.log(delay);
  }
});

A DEMO HERE

Upvotes: 0

Related Questions