Styling Slider doesn't seem to work

Development Rendering
1

I’ve created a slider in Photoshop, exported the parts (thumb and bar) as PNG files, and imported to engine. When I try to use them to style the slider, the thumb is rotated, and the bar does not display correctly.

I’ve tried size to content, which just collapses the bar completely.

Bar, as composited in PS:
Slider composited.png

PNGs saved out.

in photoshop.png
in photoshop.png700×519 12.7 KB

In editor. Note settings.

in designer.png
in designer.png983×771 53 KB

In game. Note thumb orientation and bar image.
in game.png

I’m guessing the thumb orientation could be solved by rotating it in Photoshop (not ideal, but an acceptable hack), but I don’t know how to make the bar display anything other than a thin line.

2

Rotating the slider thumb is not a hack, it’s just the way the slider that comes with UE4 works…

EDIT: It’s likely you will have to do the same with the gutter too.

3

Thanks, Zinglish. You were right. I also discovered the issue with the gutter width: it has it’s own value at the very bottom of the Style section for width. Though, I discovered that hiding it altogether and positioning a progress bar, bound to the same variable, directly behind the slider, made for a much better slider:
slider with prog bar.png

The one thing I haven’t solved, and don’t think there is a solution for, is that with such a wide thumb button, it doesn’t behave exactly as intended, regarding it’s hit region: when the slider is at 0%, then the bottom of the thumb is where a narrow thumb would be, meaning that clicking on the center of the thumb makes it jump up to 10% or so. But when it’s at 100%, then the top of the thumb is at 100%, so clicking on the center jumps it down to 90% or so.

It’s not a huge issue. The obvious work around is to do something similar to what I did replacing the gutter with a progress bar: use the default thumb, and bind the big thumb as an image whose screen offset is bound to the same variable, stack it on top of the slider and prevent it from catching any hits. Not sure how all that affects performance, though.

4

I made a quick recording that demonstrates the offset thing: as I drag the mouse, note the position of the pointer relative to the slider: it “stretches”:

(the skip in the middle was just lag).

<edit> this post will make sense once my previous response, which is awaiting moderation, is released. Short version is that I found the problem with the gutter width, but have a separate issue with the large thumb and the hitbox location. </edit>