SliderService - Create easy and functional Sliders!

coolalex1835 · January 2, 2022, 8:42pm

Hold on…

local SlideConfig1 = {Start=0,End=1,Increment=0.05,DefaultValue=0.8}
local Part = Slider.new(BackgroundMS,SlideConfig1,TweenInfo.new(1,Enum.EasingStyle.Linear,Enum.EasingDirection.Out))

But

Edit: nvm, I forgot axis.

coolalex1835 · January 2, 2022, 9:49pm

ooo, I now know how to implement it and how it works!

Thanks alot!

Krystaltinan · January 2, 2022, 10:16pm

No problem haha, yeah I’m still not sure why it doesn’t show up on autocomplete.

Krystaltinan · January 3, 2022, 3:42am

Update!

Fixes
When you run :OverrideIncrement(), it will now move the slider (Using a NEW function called :move(), this function is internal so I don’t reccommend using it, but you can try lol). I’ve also fixed a bug where snapping to scale would sometimes over/underflow the value you get.

SoMekSlime · January 8, 2022, 6:07am

Thanks for this great resource! I do have a question, I’m running into this little issue where the slider button overflows beyond the slider frame and was wondering how I can make sure it stays within bounds. If it matters, the AnchorPoints for both the frame and button are (0.5, 0.5).

Here’s a gif for visual aid of the issue:
https://gyazo.com/6ae5449eea9a5d4770e413e51c075b4f

Krystaltinan · January 8, 2022, 8:18am

Hm, let me check what mine are. I think the anchor point is the issue as it only sets the position based on the percentage.

Krystaltinan · January 8, 2022, 8:20am

My slider is also 0.5, 0.5. I think this is because of your button size. Your example looks fine though as the center is always in the correct position?

SoMekSlime · January 8, 2022, 10:23am

My button size utilizes scale values and not offset. No matter what value I have for Y scalar it’ll still overflow, so what do you suggest I have to do to the size of the button? I’ve also tried making the Y scalar 0 and sizing with the offset instead but the overflow still occurs.

The center is always in the correct position as I have its initial position set to (0.5, 0, 0.5, 0) and also set the DefaultValue to the midpoint of the Start and End.

Here’s a screenshot of the script and properties tab:

Dunno if this would be useful to note but these are the buttons positions when the Y value is set to 0 and 1,

Position (0.5, 0, 0, 0):

Position (0.5, 0, 1, 0):

When I created my custom slider behaviour I was having this same issue and to fix it I’d give it an offset to (0.5, 0, 0, 25) and (0.5, 0, 1, -25) to keep it from overflowing. However I’d rather restrain from modifying your module and I assume that it’s something I’m doing wrong on my end since you and others don’t face this issue…

Krystaltinan · January 8, 2022, 11:35am

Hmm, mind sharing a place file? I can’t think of anything right now, might do some experimenting.

Krystaltinan · January 8, 2022, 11:32pm

Update!

Fixes
Thanks to @SoMekSlime, a visual issue has been fixed! The slider will now account for it’s size and will not overflow past the gui bounds. I might add a bit of padding to fix the tiny overflow but for now it seems fine.

Update 2!

Okay so, I’ve decided to get off mah lazy backside and add padding! By adding a new argument to the end of Slider.new(), you can choose how many pixels the button pads from the start and end’s of the slider. The default value for this is 5 pixels.

function Slider.new(holder: any, configuration: ConfigDictionary, moveTweenInfo: TweenInfo, axis: string, padding: number)

Krystaltinan · January 11, 2022, 11:30am

Update 3!

Fixes
I’ve gone ahead and fixed a bug which would make the gui go out of the bounds when the anchor point is not 0.5 (on the specified axis). It’s not the most efficient way, but hey I can’t be bothered finding a weird math formula at midnight. However it works!

EDIT: After spending like 30 minutes in desmos, I’ve found a formula for it!.
Instead of finding a value in-between from pre-set values, I use:

local decrement = ((2 * absoluteSize) * anchorPoint) - absoluteSize

Old Code

local decrements = {
		{0, -absoluteSize},
		{0.25, -absoluteSize / 2},
		{0.5, 0},
		{0.75, absoluteSize / 2},
		{1, absoluteSize}
	}
	
	local lowerBound, upperBound
	
	for index = 1, #decrements - 1 do
		if anchorPoint >= decrements[index][1] and anchorPoint < decrements[index + 1][1] then
			lowerBound = decrements[index]
			upperBound = decrements[index + 1]
			break
		end
	end
	
	local decrement = map(anchorPoint, lowerBound[1], upperBound[1], lowerBound[2], upperBound[2])
        local maxScale = (1 - minScale) + (decrement / holderSize)

Czlopek · January 16, 2022, 12:10am

Any chances for the ability to edit sliders? change Start and End Values while it’s active?
Great work by the way really helpful.

Krystaltinan · January 16, 2022, 12:14am

May I ask what would this be used for? I could add it but it would mean the slider would change position when it’s done.

Czlopek · January 16, 2022, 12:22am

I have been trying to make it work as a music slider, creating and deleting sliders for every track fitting “End” to Sound.TimeLength, but there are some weird complications.
Maybe the way I set it up was incorrect or something.

Krystaltinan · January 16, 2022, 12:27am

Ohhhh, what about destroying the slider and then recreating it.
For example.

local sound = ...
local slider = Slider.new(holder, {Start = 0, End = sound.TimeLength, Increment = 0.1}, ...)
local connection;

sound:Play()
connection = sound:GetPropertyChangedSignal("TimePosition"):Connect(function()
  -- not sure if this will work
  slider:OverrideValue(sound.TimePosition)
end)

sound.Ended:Connect(function()
  connection:Disconnect() -- Make sure we don't keep overriding when slider doesn't exist
  slider:Destroy()
  -- Create new slider
end)

this is an example but when the sound is finished, create a new slider and connect it, I’ll try make an example

Krystaltinan · January 16, 2022, 5:56am

Update!

Additions

Added SliderObject.Dragged
Added SliderObject.Released
Changed Slider._held to Slider.IsHeld (this is public and usable)

Czlopek · January 16, 2022, 1:14pm

Yea it was going pretty much like that, I just had a hole that wasn’t disconnecting them correctly.
Something I just had sleepover to notice.
Now that I think of it Dragged and Released are much better options to add on,
but as of now, they don’t work correctly I’m guessing it should return a value but it always spews out nil.
Unlees you set it up in a different way, I did it like this.

newSlider.Released:Connect(function(newValue)
   print(newValue)
end)

Krystaltinan · January 16, 2022, 11:31pm

Oh, only OnChange was meant to do that, however it would be nice.

Krystaltinan · January 17, 2022, 12:41am

Mini Update!

Changes

Changed SliderObject.OnChange to SliderObject.Changed for better readability.
SliderObject.Released will now fire with a newValue parameter.

Note: Attempting to use OnChange will still work however it will throw a warning.

Mini Update 2!

Fixes

Fixed a bug where the .Released event wouldn’t fire when your mouse was still within the button’s bounds (thank you to @Czlopek for finding this lol)

Krystaltinan · January 22, 2022, 2:37am

Mini Update 3!
I really needa stop doing these

Changes

All current/future RBXScriptSignals will be using the Signal library for ease of use. This removes the need for creating and destroying bindable events.