How to make a slider

image
I am right now making some plugin which allows you to upload local music and play them in studio, But one issue, how would I make the slider draggable, I have seen some tutorials but they arent the ones im looking for, i made the slider size based unlike other slider tutorials, here is what i mean
image
this is the hierarchy of the slider, im using math.clamp to size the musicPosition frame as the music time. So any ideas on how to make the slider?

showing Scripts shouldnt be needed, but please provide a example snippet to make the slider.

i havent done something like this but it probably would involve checking for when it’s clicked and changing its y axis to the mouse’s y axis until the left mouse button is released. i’d make the slider just a huge rectangle that’s covered by the ui so it gives the illusion of it filling up. there are probably better ways to do this but this is just what i thought of

1 Like

There is one issue though, I cant set the position of the musicPosition because it depends on size to fill up the bar. But thanks for trying to help

If you mean this-
https://gyazo.com/0e5104692e5f5fb78d6e9c0b260e31b9

I just typed in some code to give you an idea on how to do this

local slider = script.Parent
local UIS = game:GetService('UserInputService')
local player = game.Players.LocalPlayer
local mouse = player:GetMouse()
local MouseLocation
local isSliding = false -- Is the slider is currently sliding


game:GetService('RunService').RenderStepped:Connect(function()
	MouseLocation = UIS:GetMouseLocation() -- 2D Mouse position always getting
end)

slider.MouseButton1Click:Connect(function()
	isSliding = true -- sets is sliding to true
	-- Keeps repeating to copy the same position until mouse is clicked.
	repeat
		task.wait()
		-- View the dev hub for like .19 (UDim2.fromOffset) since that explains it better than me
		slider.Position = UDim2.fromOffset(MouseLocation.X, slider.Position.Y.Offset) -- Make sure position is offset if you're using this
		mouse.Button1Down:Connect(function()
			isSliding = false
		end)
	until isSliding == false
end)

Hope it helps

EDIT: THIS CODE DOES WORK!

2 Likes

Hmm ill try this. Thank you

No it didnt work, What i mean is a scaled slider, take this for example:

I cant do position based sliders.

Thank you anyway

im surprised this hasnt been solved yet. i thought of a solution that might work but i wasnt bothered to think of it more because i just assumed someone else would figure it out by then. i dont really know if your ui’s size and position is scale or offset. the general idea of what i thought of is if you click on the slider, it will get the mouse’s x position and subtract the ui’s position (which should be at the very left of the slider) from it, and divide that by the length of a completed slider (which would be the background of it i think but idk). this should give the scale. im not really sure if this would work since im not very good at ui but that’s the general idea of what i’ve thought of.

2 Likes

Thank you for the response and this move is really smart. I will try it.

Late response but It didnt work. I tried setting the timeposition for the audio instead so the heartbeat slider script would change it anyway annd didnt go well. if anyone needs script reply