Slider with round ends

Hi, I have a problem creating sliders that have round ends, that also adapt to different scalings.sgpgnr
As you can see, the horizontal scaling works perfectly, but when the bar gets bigger vertically the stretching begins.

I was pretty sure that this way of slicing would result in the correct behavior: Designing a capsule and only slicing the middle part, so that it can expand horizontally.

I know that I can fiddle with this value to kind of eyeball the stretching away:

But of course these elements have to be dynamic and also work with multiple device resolutions and aspect ratios.
How would you achieve this very common task in Unity UI?

Try adding the horizontal slices in the middle. The image may then expand vertically, but only if you stretch it to larger than its native resolution

I tried that as well with a “box with rounded corners” the behavior is the same as you can see in the video, the round edges also get stretched when I go smaller as the native resolution. I can only find a pixel perfect sweet spot setting the Pixels Per Unit Multiplier to get it to work in a static size :confused:

Ok I get it. Just use the ppu multiplier. If you one it to scale with screen-size, just use the Canvas Scaler. Aspect ratio should not affect it if you set the anchor correctly