Jump to content


Best practice for +1 to an integer using a set range

Recommended Posts

Hi All, 


Hopefully someone can point me in the right direction. I'm sure there's a fairly simple solution but i've yet to find an example (probably too remedial!). 



I have an infographic where animated elements are controlled by a timeline slider. That part works fine.


What I need to do now is have two text items update using the same slider.


For example, first item has a minimum text value of 47 (always whole integers), a maximum of 91 (range?) - so when the slider handle is all the way to the left the html text reads 47, all the way to the right reads 91 and movement of the handle in-between the two extents +/- the text value. The second item is exactly the same however uses a different range (0.9M > 2.3M)


The CodePen (linked) is similar to what I want however the value it is based upon time rather than set min/max values. 


Hope that makes sense. Happy to cobble together a more relevant CodePen if needed. 


Thanks in advance for any help / pointers / codepen examples!



See the Pen hJCqd by Manoz (@Manoz) on CodePen

Link to comment
Share on other sites

Thanks, for the demo and clear explanation. 


This percentToRange() function from Chrysto should help:


// Update the dragger when the timeline is updated.
  function updateDragger() {
    TweenLite.set(dr, {x: tr * tl.progress()});
    ti.html(percentToRange(tl.progress(), 47, 91).toFixed(2));

  //function from our good friend Chrysto http://bassta.bg/2013/05/rangetopercent-and-percenttorange/
  function percentToRange(percent, min, max) {
   return((max - min) * percent + min);


  • Like 1
Link to comment
Share on other sites

Lerp (linear interpolation) is the function you are looking for. The middle line in the function clamps it to 0-1 in case the slider is a little off.

function lerp(start, stop, amt) {
  amt = amt < 0 ? 0 : (amt > 1 ? 1 : amt);
  return start + (stop - start) * amt;

Here's it running the range 47-91. Just pass in the start and end values and the percent.


See the Pen EVREKp by osublake (@osublake) on CodePen


EDIT: Carl posted basically the same thing while I was writing this. 

Link to comment
Share on other sites

Also, I made this a long time ago, so I'd probably do it differently, but you can control the start and end of a range.


See the Pen ifomn?editors=001 by osublake (@osublake) on CodePen

Link to comment
Share on other sites

Thanks for your help guys!


I'll give it a shot later and update you with how I get on.



Link to comment
Share on other sites

Thanks again for your input. I've had a go at implementing your suggestions but i'm not getting very far. I think I understand the theory > it's just how to integrate it into my own project which is proving difficult. 


I've cobbled together a CodePen (first time!) of the actual project i'm working on :

See the Pen zvaJbq by anon (@anon) on CodePen


Currently the values are being changed with the TextPlugin just to illustrate the start and end result


Any help would be really appreciated!

Link to comment
Share on other sites

Appreciate all the help guys. 


Cracked it! 

See the Pen zvaJbq by anon (@anon) on CodePen


Happy Halloween

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.