Make slider snap into grid

Help and Feedback Scripting Support
#1

So I want to make the slider snap into grid depending on the min and max values:

local isDragging = false
local startMousePosition = nil
local startSliderPosition = Slider.Position.X.Scale

local minSliderPosition = 0 -- Minimum scale value
local maxSliderPosition = 1 -- Maximum scale value

local minValue = 70 -- Minimum value for the number
local maxValue = 100 -- Maximum value for the number

local function updateNumber(value)
	local number = math.floor(value)
	print("Number:", number)
end

local function tweenPosition()
	local mouseDelta = mouse.X - startMousePosition
	local totalSliderLength = Slider.Parent.AbsoluteSize.X
	local newSliderScale = startSliderPosition + mouseDelta / totalSliderLength

	local clampedSliderScale = math.clamp(newSliderScale, minSliderPosition, maxSliderPosition)
	local sliderPosition = UDim2.new(clampedSliderScale, 0, Slider.Position.Y.Scale, Slider.Position.Y.Offset)
	local barSize = UDim2.new(clampedSliderScale, 0, Bar.Size.Y.Scale, Bar.Size.Y.Offset)

	local tweenInfo = TweenInfo.new(0.1, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, 0, false, 0)
	local sliderTween = TweenService:Create(Slider, tweenInfo, { Position = sliderPosition })
	local barTween = TweenService:Create(Bar, tweenInfo, { Size = barSize })

	sliderTween:Play()
	barTween:Play()

	local newValue = minValue + (maxValue - minValue) * clampedSliderScale
	updateNumber(newValue)
end

Slider.MouseButton1Down:Connect(function()
	isDragging = true
	startMousePosition = mouse.X
	startSliderPosition = Slider.Position.X.Scale
end)

Slider.MouseButton1Up:Connect(function()
	isDragging = false
end)

mouse.Move:Connect(function()
	if isDragging then
		tweenPosition()
	end
end)

Current:

#2

Could you elaborate a little more on what the issue is / what you’re wanting? Depending on what you’re needing this for, you could just take the percentage of how much of the bar is filled (let’s say 50% or .5) and taking the maximum - minimum, in your example 30 then multiply that by the percentage to get the offset from minimum to maximum.

Or are you looking for the slider to snap to certain increments?

#3

Something like this:

#4

Okay, I think I understand what you’re looking for. Sure thing, lemme whip up a mock up in studio and I’ll see what I can do. :slight_smile:

#5

I’m sorry, but I guess I still don’t get what you’re looking for as they both appear the same, the only difference being this last video updating the value text. Is that what you’re wanting? Please elaborate to better receive help.

#6

I want the slider to snap into grid depending on the min and max value.

#7

When they open the UI, you want it to snap to where they last set it you mean?

#8

No, when you drag the slider, it snaps into a grid.

#9

If fixed it with this:

local increaseAmount = 1 -- Amount to increase by when snapping

local function tweenPosition()
	local mouseDelta = mouse.X - startMousePosition
	local totalSliderLength = Slider.Parent.AbsoluteSize.X
	local newSliderScale = startSliderPosition + mouseDelta / totalSliderLength

	local clampedSliderScale = math.clamp(newSliderScale, minSliderPosition, maxSliderPosition)
	local snappedSliderScale = math.floor((clampedSliderScale - minSliderPosition) / (maxSliderPosition - minSliderPosition) * (maxValue - minValue) / increaseAmount + 0.5) * increaseAmount / (maxValue - minValue) + minSliderPosition
	local newValue = minValue + (maxValue - minValue) * snappedSliderScale

	tweenToNumber(newValue)
end
#10

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.