Download

Slider with Two Handles

Hello, I am trying to make a slider with two handles, I did manage to make one using two buttons and setting their position (Render Translation) based on “Mouse Move”, now to use this set up I am using “Is Pressed” function for the button, which is suitable only for touch (unless i use “Use Mouse for Touch” which creates new sets of problems), is there any way around that problem? or any other better solution to make a slider with two handles?

You need to be a little more specific. What do you mean by Slider? Is this a UI element or an actor in the world?
I think maybe you’re referring to a sliding door?

Hello, sorry for the confusion, its a UI slider. I have attached the blueprint for “On Mouse Move” it works fine, just need to find an alternative for “Is Pressed” function.

Okay, so I’m still not understanding “Two Handles” Can you give more specifics of what you’re trying to accomplish? A UI slider by design has a single handle that you move from A to B. I’m not understanding what you’re trying to do with two handles.

the two handles are useful for specifying a range, for example we want to filter objects by a range of pricing (higher than 20$ and lower than 40$) we can use such sliders.

I’d say a better solution is not to use buttons for something like this - mostly due to the way they hungrily consume input. Here’s what I’ve got:

It’d take too many screenshots so here’s the project:

And a quick top-down behind the concept:

  • each handle is a separate user widget with its own logic; so you can have more than 2 handles if needed
  • handles sit in the parent’s canvas and we manipulate the position of the slots the canvas creates
  • the handles tell the parent they’ve been selected and the parent’s onMouseMove shifts them about, dictating clamp values based on its own geometry and the geometry of the moving children
  • nothing here is hardcoded so the handles can be of any size and padding is accounted for [fingers crossed]
  • each handle displays its own value and the one being moved appears on top of the other one
  • disclaimer: this has not been tested thoroughly
  • one thing that I omitted knowingly is the offset of where the cursor holds a handle; mostly irrelevant if the handle is thin, and quite noticeable when its thick, as in the anim
  • a feature that is missing and will probably be quite relevant is that each handle should respect the position of the other and treat its offset as a clamp. So the right one should not be allowed to slide in front of the left. You could flag each handles with a bool so it know where it belongs and onMouseMove can dictate clamping values accordingly.

Hopefully you can take it apart or at least treat it as inspiration. There are some kinks to iron out but it seems to be the right direction to take. There’s a bit of config available:

image

What happens to those values is unhandled atm; they are stored in the handles and their parent has access, ofc. They can be dispatched or the parent can pull them. Up to you.

@Everynone Thanks a lot mate for your kind help and providing the source material. I will study it and see what modification i can make ot make it suitable for my project, I can use the same method as in mine to clamp the values of the handles in relation to the second handle.

1 Like

Everynone is the forum champ :slight_smile: Epic should really pay the guy :stuck_out_tongue:

1 Like