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:
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.
4 Likes
@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 
Epic should really pay the guy 
2 Likes
Hi, I’d really like to be able to use this. I’ve added it into my own “Main Menu” widget, but it’s not letting me change the values. Any guidance would be appreciated.
At this point we can only guess how you’ve implemented this. There is probably a bunch of variables whose defaults should not be zero. Double check those.
1 Like
Привет, тот кто ищет.
Я провел анализ кода архива выше и был удивлен тому, что он был спроектирован… странно. Для адекватной работы нужно убрать плохо работающие диспетчеры (они ответственны в самих ползунках за срабатывание) и заменить их к чертям на что-то более адекватное, по типу бинда на нажатие, что отправляет по ссылке к UI на выполнение ивента установки активного ползунка.
Проблема слетающего фокуса внимания тупо в размерах, тики слишком редко срабатывают в случае обработки мыши. Или больше хитокс делаем (как я и сделал) либо накручиваем страшную махину для более точного позиционирования.
Плюс зачем было использовать OnInitialized? Заменил на OnConstruct и все работает как положено.
Для тех, кому лень читать буквы:
Добавил картинку без ничего для большего охвата пространства (не все игроки снайперы)
Поскольку мы отказались от диспетчеров, нам нужно заменить их на бинды нажатия и отпускания.
А вот и сам код обработки. Мы просто отправляем по ссылке в наш слайдер запрос на активацию ивента с ссылкой на себя.
ButtonUp версия делает то же самое, но с пустой ссылкой.
А вот и код самого ивента. Проще уже некуда.
И вуаля - вы имеете готовый, рабочий и главное - удобный слайдер с поддержкой многочисленных ползунков.
2 Likes
Simplified variation in 1 widget.
google drive - ue 5.3
I use it in ArchViz projects.
Pink zone - its for loose touch event.
Custom Snaping.
Orange bar is adaptive to positions of circles.
2 Likes
Building on Andrey’s work, I did some cleanup and exposed a few properties of the slider. Handle icons can be replaced.
You can grab it on github: https://github.com/tqtran7/two-handles-slider
yep, bro 404, can you send new link?
Ops, sorry about that, I had the repo on private. It should be public now.