SliderService - Create easy and functional Sliders!

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
image

Edit: nvm, I forgot axis.

1 Like

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

Thanks alot! :happy2:

1 Like

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

1 Like

Update!


:notebook: Fixes :notebook:
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.

2 Likes

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

1 Like

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.

1 Like

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?

1 Like

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…

1 Like

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

1 Like

Update!


:notebook: Fixes :notebook:
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)
3 Likes

Update 3!


:notebook: Fixes :notebook:
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)
2 Likes

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

1 Like

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.

1 Like

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.

1 Like

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

1 Like

Update!


:notebook_with_decorative_cover: Additions :notebook_with_decorative_cover:

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

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)
1 Like

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

2 Likes

Mini Update!

:spiral_notepad: Changes :spiral_notepad:

  • 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!

:notebook: Fixes :notebook:

  • 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)
2 Likes

Mini Update 3!
I really needa stop doing these

:spiral_notepad: Changes :spiral_notepad:

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