CODEWITHSUNDEEP
jquery
rmbaumer
rmbaumer

Reputation: 45

jQuery to animate changing value of input field

I have the following jsfiddle: http://jsfiddle.net/60oa2zah/

//Add Value to slider button
$("[data-slider]")
    .each(function () {
        var input = $(this);
    })
        .bind("slider:ready slider:changed", function (event, data) {
            $(".dragger")
                .html('<span>$' + addCommas(data.value.toFixed(0)) + '</span>');
        });
//Add thousands separator  
function addCommas(nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

When loading the page, I would like the slider to animate from a start value of $100 to an end value of $500. I've tried animating the value field, but haven't had any luck. Is there another way to accomplish this? On page load, the slider should appear to drag itself to $500.

This is my attempt to animate the slider (doesn't work...)

//Drag from 100 to 500
$(document).ready(function() {
$("#Amount").val(
  $({countNum: 100}).animate({countNum: 500}, {
  duration: 3000,
  easing:'linear',
  step: function() {
    console.log(Math.floor(this.countNum));
  }
}); ); 
});

Upvotes: 2

Views: 4884

Answers (4)

M.P.
M.P.

Reputation: 1

Try this:

$(document).ready(function() {
    $({ val: 100 }).animate({ val: 500 }, { step: function(val) { $("#Amount")[0].value = val.toString(); }});
});

Of course if you want to add "duration" and "easing" you can do it...

Upvotes: 0

John S
John S

Reputation: 21482

You really can use jQuery's .animate() function if you want, and your code was close. (reference)

Two things though:

  1. The value being animated has to start at zero. So you need to have it animate from 0 to 400, rather than from 100 to 500. (See the comment to this answer)
  2. Use selector.simpleSlider("setValue", newValue) to set the value of the slider. (jQuery Simple Slider documentation)

Here's the code:

$(document).ready(function() {
    $({ val: 0 }).animate({ val: 400 }, {
        duration: 3000,
        easing: 'linear',
        step: function(val) {
            $("#Amount").simpleSlider("setValue", 100 + Math.ceil(val));
        }
    });
});

jsfiddle

Instead of using .animate(), you could use setInterval() as follows:

$(document).ready(function() {
    var interval = setInterval(function() {
        var val = +$('#Amount').val() + 100;
        $("#Amount").simpleSlider("setValue", val);
        if (val >= 500) {
            clearInterval(interval);
        }
    }, 750);
});

jsfiddle

Upvotes: 2

Jordan James Holt
Jordan James Holt

Reputation: 91

Alright, I solved part of your issue, but getting the slider to move along with the number update may be a bit a of a different bear entirely. Here are the modifications I made.

$(document).ready(function() {

        $({countNum: 100}).animate({countNum: 500}, {
          duration: 3000,
          easing:'linear',
          step: function() {
              $(".dragger").html('<span>$' + Math.ceil(addCommas(this.countNum)) + '</span>');
          }    
        });

});

So, wrapping that up in the $("#Amount).val(...) wasn't doing what you thought, you wanted it to update the value each time the animate triggered. This is what the step function does, however. So all I did was remove the $("#Amount) and had the step function update your html.

I think you may need to rethink your solution here, however. This animate method will work given some effort. But the real, deeper issue here is the need for the UI to be able to constantly update the UI as a value changes. There are libraries out there that do this in javascript, and do it well, it is a concept in JS known as data-binding.

Angular.js can achieve data binding, but that may be a bit overkil for your needs(Still highly recommend learning.) I think you would be more insterested in Knockout.js, which is tailored specifically to quickly getting a page up and going with data-binding.

You may consider having the UI "watch" your dollar amount, and make slider bar changes that scale to that value. If done correctly, no JS will need to be witten to manually update the UI, the library will take care of it for you. :)

Anyway, good luck!

Upvotes: 0

Tieson T.
Tieson T.

Reputation: 21231

Well, took a few attempts, but here's what seems to work: http://jsfiddle.net/60oa2zah/2/

$(function () {

    var sliderValue = 100;

    var interval = setInterval(function(){
        sliderValue += 100;
        $("[data-slider]").simpleSlider("setValue", sliderValue);
    }, 300);

    //Add Value to slider button
    $("[data-slider]").on("slider:ready, slider:changed", function (event, data) {
        $(".dragger")
            .html('<span>$' + addCommas(data.value.toFixed(0)) + '</span>');

        if(data.value == 500){
            clearInterval(interval);
        }
    });

    //Add thousands separator  
    function addCommas(nStr) {
        nStr += '';
        x = nStr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        return x1 + x2;
    }
});

As @Barmar mentioned, you just need to use setInterval() : https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval

jQuery.animate() isn't really going to work for this, since (as noted in the API), it's intended for

animation of a set of CSS properties.

Upvotes: 0

Related Questions