Slider GUI is going beyond the bar's boundaries

[z_jni]

1. What do you want to achieve?
   I want to create a slider that you can adjust the volume of sound effects with.

2. What is the issue?
   The slider goes beyond the bar on the right side.

3. What solutions have you tried so far?
   I did look for solutions on the forum, but those people didn’t seem to have the same problem as me.

This is the code for the slider:

local Player = game:GetService("Players").LocalPlayer
local UIS = game:GetService("UserInputService")
local RS = game:GetService("RunService")
local bar = script.Parent.Bar
local box = script.Parent.Number
local slider = bar.Slider
local active = false
local step = 0.01
local percentage = 0

function snap(number,factor)
	if factor == 0 then
		return number
	else
		return math.floor(number/factor+0.5)*factor
	end
end

UIS.InputEnded:Connect(function(input)
	if input.UserInputType == Enum.UserInputType.MouseButton1 then
		active = false
	end
end)
	
slider.MouseButton1Down:Connect(function()
	active = true
end)

RS.RenderStepped:Connect(function()
	if active then
		local MousePos = UIS:GetMouseLocation().X
		local spos = slider.Position
		local bsize = bar.AbsoluteSize.X
		local bpos = bar.AbsolutePosition.X
		local pos = snap((MousePos-bpos)/bsize,step)
		percentage = math.clamp(pos,0,1)
		slider.Position = UDim2.new(percentage,0,spos.Y.Scale,spos.Y.Offset)
		box.Text = string.format("%.0f%%", percentage * 100)
	end
end)

If you look closely you can notice a small gap.

[bitsplicer]

local Player = game:GetService("Players").LocalPlayer
local UIS = game:GetService("UserInputService")
local RS = game:GetService("RunService")
local bar = script.Parent.Bar
local box = script.Parent.Number
local slider = bar.Slider
local active = false
local step = 0.01
local percentage = 0

function snap(number,factor)
	if factor == 0 then
		return number
	else
		return math.floor(number/factor+0.5)*factor
	end
end

UIS.InputEnded:Connect(function(input)
	if input.UserInputType == Enum.UserInputType.MouseButton1 then
		active = false
	end
end)
	
slider.MouseButton1Down:Connect(function()
	active = true
end)

RS.RenderStepped:Connect(function()
	if active then
		local MousePos = UIS:GetMouseLocation().X
		local spos = slider.Position
		local bsize = bar.AbsoluteSize.X
		local bpos = bar.AbsolutePosition.X
		local pos = snap((MousePos-bpos)/bsize,step)
		percentage = math.clamp(pos,0,1)
		slider.Size = UDim2.new(percentage,0,spos.Y.Scale,spos.Y.Offset)
		box.Text = string.format("%.0f%%", percentage * 100)
	end
end)

I think you meant to put Size instead of Position

[z_jni]

Nope. While it did fix the issue of the slider going beyond the limits, this is how it looks now.

[Bear23913 (BearBoi)]

Hey, this is really adpatable, and thank you but the error you counter was with the line

slider.Size = UDim2.new(percentage,0,spos.Y.Scale,spos.Y.Offset)

Just needs to be changed from .Size to .Position, so it would look like this

slider.Position = UDim2.new(percentage,0,spos.Y.Scale,spos.Y.Offset)

May I also ask if theres an alternative to using Renderstepped where it is as it could become a potential cause of lag?

[z_jni]

This will not fix my problem of the slider going beyond the bar, as changing .Size to .Position will just make the script be the same as it originally was.

As for an alternative to Renderstepped, I’m not very experienced in making UIs so I cannot say anything about that, unfortunately.

[z_jni]

I found a solution! Changing
slider.Position = UDim2.new(percentage,0,spos.Y.Scale,spos.Y.Offset) to
slider.Position = UDim2.new(percentage,-12.5,spos.Y.Scale, spos.Y.Offset) will fix the issue of the slider going beyond the bar.