How do I create a touch-enabled drag-able slider?

Good morning!

I’m working on a mobile GUI using UMG, and I’m running into an issue where I don’t quite understand how to create a touch-enabled interactive slider that the player can drag/adjust while playing. I can get the slider on the screen, and I can have it show the current value of the associated variable. But I want the player to be able to touch and drag this slider while playing. Can anyone point me in the right direction, please?

Hello Praetor Xjun,

I have a few questions for you that will help narrow down what issue it is that you are experiencing.

Quick questions:

  1. What version of the engine are you using?
  2. What type of device are you using exactly (example: iPhone 4s)
  3. What version is the Operating system is on the device (example: iOS 8.0.1)
  4. Can you reproduce this in a clean project?
  5. If so, can you provide a detailed set of steps in order to reproduce this on our end?
  6. Are you able to use the slider with the mouse?

What version of the engine are you using? Version 4.6.1

What type of device are you using exactly (example: iPhone 4s) My first prototype will be on the, but I hope to eventually branch to most mobile markets.

What version is the Operating system is on the device (example: iOS 8.0.1) Version 8.1.3

Can you reproduce this in a clean project? I haven’t tried this yet. I’ll try today and post my results.

If so, can you provide a detailed set of steps in order to reproduce this on our end? I created a UI blueprint and added a scroller in the design section. On the event graph, I cast it to the viewport, called the current variable value and the maximum variable value, converted the numbers to be between 0(min) and 1(max), and return this to the “Value” portion of the slider as a bind. When I go to play mode on the PC, I can only view this value. The slider does move up and down to reflect the change I can make to increase or decrease the value by an assigned keyboard input, but I can’t use the mouse to edit the slider. I would also like to add the touch controls for sliding this up and down.

Are you able to use the slider with the mouse? No, I can’t seem to use the mouse in play mode.

Hello Praetor Xjun,

Have you tried setting it so that your mouse shows up all of the time? This will help narrow down what may be causing your issue.

Here is an example of how to do so.

28730-showmousehelp.png

After doing this, can you still not click and drag the slider while play testing?

Sorry, that didn’t help. I think it may be because I have nothing in the event graph to set the variable value? Here’s what I have so far. Please excuse the blank spaces, we are very early in development.

Hello Praetor Xjun,

The issue is occurring because of the binding for the value of the slider. Whatever values you have setting this binding will determine the value and because of this the value will only change when the conditions for the binding are met. In this case it would seem that the value will only change when the float “CurrentXXXX” or “MaxXXXXX” are changed. This means that the slider is locked in place until one of those values becomes updated. This is why you cannot slide the bar to change the value.

As a way to test this, you can simply remove the binding and then try to use the slider. The slider should work as expected then. I hope this information helps.

Make it a great day

Thank you!