NumberSpinner Module

For my StockWatcher plugin, @Soliform suggested I add a number spinner. I liked the idea, so I created a module that would handle it neatly.


Features:

  • Uses proxies to automatically handle all your changes and values without you needing to ever call functions yourself
  • Supports all fonts, textsizes, and colors
  • Customizable spin speed
  • Customizable decimal places
  • Customizable prefix and suffix (default is “$”)
  • Support for comma placement

API:

function NumberSpinner.new()

Creates a new Spinner object

returns Spinner

function NumberSpinner.fromGuiObject(GuiObject)

Creates a new Spinner object with the properties of the given GuiObject

returns Spinner

number Spinner.Value

Default 0
The number that will be displayed

string Spinner.Prefix

Default “$”
The string to show before the number

string Spinner.Suffix

Default “”
The string to show after the number

number Spinner.Decimals

Default 2
The number of decimal places that will be displayed

number Spinner.Duration

Default 0.3
The time it takes to spin the number

boolean Spinner.Commas

Default false
Whether to insert commas in relevant places


Spinner.TEXTGUI_PROPERTY

Any property of a TextLabel, such as Parent, Size, Position, Visible, TextColor3, TextStrokeTransparency, etc., can be set directly on the Spinner object and it will internally update the relevant Instances!


Example:

local NumberSpinner = require(script.NumberSpinner)

local PriceSpinner = NumberSpinner.new()
PriceSpinner.Decimals = 3
PriceSpinner.Duration = 0.25
PriceSpinner.Parent = MyScreenGui

while wait(0.5) do
	PriceSpinner.Value = math.random(100000)/1000
end


Source:




Enjoying my work? I love to create and share with the community, for free.

If you’d like to help fund my work, consider sponsoring me on GitHub/Patreon or donating on BuyMeACoffee/PayPal!

311 Likes

(Mmmmm good receipes and fantasies)

By the way you would explain it a bit more other than that I liked the idea

3 Likes

Nothing happens (similar to JavaScript without strict mode) when trying to set a property to a wrong type (or a read-only property); not sure if this is intentional though as I’d personally would except an error for this.
Do you have plans to support displaying Infinity, NaN and signed numbers (incl. -0.) and imaginary numbers as the currency value? Inserting those values results in an error of attempt to perform arithmetic (unm) on nil.

1 Like

Yeah, I should probably add a warn or error instead of just discarding invalid attempts for user friendliness. I’ll get on that.

Edit: Added.
image

Not planned but feel free to open a PR with that if you decide to add that in.

5 Likes

This is awesome, P.S reminds me of that old mobile game
image

9 Likes

Always thought about trying something like this. Glad to see a great module for it :slight_smile:

3 Likes

Dude. I swear you’re not human. I SWEAR you are not human. No human could be this skillfull. Expose yourself. What are you really?

On a serious note, good work. Will this work with astronomically huge numbers? Last time I tried doing something like this, the bigger the number got, the worse it ran. :Q

3 Likes

I’m a boatbomber. :blush:

I made it for my plugin which only updates four digits every five seconds, so I really didn’t have a need (edit: unless RBLX reaches $9999999 :wink:) and thus didn’t put much focus on optimization. Perhaps I’ll do a second pass on this in the future, but it might still perform acceptably at a decent number of digits if you aren’t updating them too often.
Edit: updated to be a lot more performant now :blush:

2 Likes

If you do, a way to create a NumberSpinner with a base TextLabel would be great, as I have a UIGradient in my TextLabel.

For now I’m going to fork this module and try to implement that myself

4 Likes

If you manage to go through with this you should open a pull request, it would honestly probably look weird with a lot of numbers though. it would probably look stunning with gradients though :grinning_face_with_smiling_eyes:

3 Likes

Very awesome! What went from a little project of mine is now a usable module!

3 Likes

One thing I’d suggest is making the decimal place disappear when you set the number of decimals to 0, some people may not want to display any at all.

I also tested the code sample you gave in a baseplate for about 20 minutes. It started at around 222, when the module started it went to 235, and eventually, it was going up to 325 but for some reason it just randomly zeroed out. The untracked memory might be a sign of a memory leak, but I’m not sure.

2 Likes

Update:

  • Support for 0 decimals
  • Large performance improvements (about 8-9x better now! Caches tween objects and only updates specific properties on demand now)

9 Likes

I love you thank you. I shall use for game.

2 Likes

Awesome! Thank you for taking my suggestion! :+1:

1 Like

How would I manage this to work with a custom text label instead of it creating a new one?

1 Like

Very cool. Do you plan on adding the ability to replicate and replace an existing textlabel?

1 Like

This is unbelievably smooth. I don’t think I’ve ever seen anything like this in Roblox before.

One idea though: How about a delay feature, so instead of ticking up/down multiple times in a row, you can tell it to wait longer or refresh and do one big tick so the numbers shift once, skipping however many it needs to along the way? (eg going from 123 straight to 789 with one click, instead of rapidly spinning through 234, 345, 456, etc)

2 Likes

just dont set the target number incrementally…

1 Like

The robloxian magician hits again :smiley:
Beautiful. Thanks for this handy module!

1 Like