2

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));
  }
}); ); 
});
2
  • You need to use setInterval to run a periodic function that updates the input and redraws the slider.
    – Barmar
    Aug 19, 2014 at 2:36
  • I tried. I really did. The answer is really that this slider doesn't support that. Any attempt at hacking it in will be tiresome and not well suited to this venue. Good luck. Aug 19, 2014 at 3:27

4 Answers 4

2

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

2
  • I really like your first solution, question, I was trying to find some documentation on simpleSlider, is it a third party tool or a part of JS? All I could find was a third party library that referenced it. Definitely learned a lot from this question. Haha. Aug 19, 2014 at 4:28
  • @JordanJamesHolt - It is a library that is dependent on jQuery: loopj.com/jquery-simple-slider
    – John S
    Aug 19, 2014 at 4:30
0

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.

0

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!

0

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...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.