How do i Change Slider value With a Textbox?

Help and Feedback Art Design Support
,
1

Hello devforum. I am making a settings menu which includes sliders. I followed roblox’s creative interactive UI tutorial which actually helped alot when it came to design. Create interactive UI | Documentation - Roblox Creator Hub
(Would definitely recommend reading the tutorial if you’re trying to figure out how to make sliders that affect different in-game properties.)

But since I had already created a UI for the actual menu before reading the tutorial, I couldn’t really use the scripts mentioned in the tutorial. Now i have to do it without any prior knowledge to making UI sliders. And that’s why I’m on here, at the devforum.

SettingsScript

local effectsslider = script.Parent.Options.Option.EffectsVolumeSlider
local backgroundslider = script.Parent.Options.Option.BackgroundVolumeSlider

local backgroundsliderhandle = backgroundslider.SliderFrame.Handle
local backgroundsliderinnerfill = backgroundslider.SliderFrame.InnerFill
local backgroundslidervalue = backgroundslider.SliderFrame.Value

local effectssliderhandle = effectsslider.SliderFrame.Handle
local effectssliderinnerfill = effectsslider.SliderFrame.InnerFill
local effectsslidervalue = effectsslider.SliderFrame.Value

local rs = game:GetService("RunService")

rs.RenderStepped:Connect(function()
	effectssliderinnerfill.Size = UDim2.new(effectssliderhandle.Position.X.Scale,0,1,0)
	backgroundsliderinnerfill.Size = UDim2.new(backgroundsliderhandle.Position.X.Scale,0,1,0)
	backgroundslidervalue.Text = string.format("%.2f", backgroundsliderhandle.Position.X.Scale * 2)
	effectsslidervalue.Text = string.format("%.2f", effectssliderhandle.Position.X.Scale * 2)
end)

image
image245×805 21.1 KB

This code does technically work, there is just one thing that is bugging me from a players perspective. When dragging the slider the value gets projected onto the textbox. But it would be nice for the player to also be able to type in a textbox to set the slider value to a specific number.

2

Hi ! The problem you encounter seems to be caused by your RenderStepped function. You’re setting the text property of both TextBox to a calculated value each frame. So when the player wants to enter another value in the TextBox, it is instantly replaced with the calculated value (which is based on the slider’s position).
To solve this, you can try to pass an onChanged callback to the SliderController like this :

function onChanged(newValue)
	-- set the TextBox value here --
end

SliderController.hydrate({
	object = << slider object >>,
	onChanged = onChanged
})

And you can also implement the following code to set the value of the slider to the value given by the player :

textBox.FocusLost:Connect(function()
	-- you can add a validation system to verify that the entered text is a number --
	SliderController.setValue(tonumber(textBox.Text))
end)

After this, you can the remove the last 2 lines of your RenderStepped function (those starting with backgroundslidevalue.Text = ... and effectesslidervalue.Text = ...).

3

Thanks you for replying. I am sure this probably works but I’m struggling understanding how to set up the code. If you could clear that up it would be much appreciated. This is the changes I’ve done.

local effectsslider = script.Parent.Options.Option.EffectsVolumeSlider
local backgroundslider = script.Parent.Options.Option.BackgroundVolumeSlider

local backgroundsliderhandle = backgroundslider.SliderFrame.Handle
local backgroundsliderinnerfill = backgroundslider.SliderFrame.InnerFill
local backgroundslidervalue = backgroundslider.SliderFrame.Value

local effectssliderhandle = effectsslider.SliderFrame.Handle
local effectssliderinnerfill = effectsslider.SliderFrame.InnerFill
local effectsslidervalue = effectsslider.SliderFrame.Value

local rs = game:GetService("ReplicatedStorage")
local SliderController = require(rs.SliderController)
local StatefulObjectController = require(rs.StatefulObjectController)

local rus = game:GetService("RunService")

rus.RenderStepped:Connect(function()
	effectssliderinnerfill.Size = UDim2.new(effectssliderhandle.Position.X.Scale,0,1,0)
	backgroundsliderinnerfill.Size = UDim2.new(backgroundsliderhandle.Position.X.Scale,0,1,0)
end)

function onChanged(newValue)
	backgroundslidervalue = 0.5
end

SliderController.hydrate({
	object = backgroundslider.SliderFrame,
	onChanged = onChanged
})
backgroundslidervalue.FocusLost:Connect(function()
	-- you can add a validation system to verify that the entered text is a number --
	SliderController.setValue(tonumber(backgroundslidervalue.Text))
end)

The script is returning this error
image

4

You set backgroundslidervalue itself rather than its text to 0.5 in the onChanged function which means it won’t be a TextBox anymore (why .FocustLost doesn’t work and the error appears)