Custom image for slider fill not scaling correctly

[johnc81]

Hello,

I am trying to build my UI and want to use a slider for volume control. I created a background and fill image in Photoshop and am trying to implement them, but it is giving a weird result. There is 1 image for the background and 1 for the fill.

When the bar is full, everything looks fine:

As soon as I move the slider, the rounded fill image starts to become more square and moves left overlapping the background.

I can understand the rounding issue because I am squashing an image, but the moving left is confusing.

Has anyone else experienced this or know how to resolve? Is it possible to use rounded images for slider fill in Unity? How can I stop it moving left?

Many Thanks,

John

[Hosnkobf]

I think you need to set pivot.x to 0.

[johnc81]

Hi,

Thank you for your comment. I set pivot x to 0 for both the Fill Area > Rect Transform and Fill > Rect Transform but am still having the same issue.

Many Thanks,

John

[salmannabi]

Hi

This might be late but it might help someone else down the line, I ran into the same issue and ended up here while searching for a solution, the pivot thing didn’t work so I tried to mess about with things and found something that worked for me.

All I did was change the Slider > Fill Area > Fill > Image > Image Type from “Simple” to “Filled”, and voila it worked. The progress fill will stay fixed while moving the progress slider.

I had to adjust the fill area as well to my liking and anyone else may need to do the same.

And, To avoid the image getting condensed and thus distorting when the slider goes close to zero, use 9-slicing on the slider fill sprite image

check this link for a tutorial on 9-slicing: Using 9-Slicing for Scalable Sprites - 2019.3 - Unity Learn

All you have to do in the 9-slicing is to leave the edged borders outside the selection area in the sprite editor (per the above tutorial) and hit apply, now when you move the slider close to zero the image will look like its getting cropped than getting smushed together.

[AlreadyInUse]

@salmannabi

Hi

This might be late but it might help someone else down the line, I ran into the same issue and ended up here while searching for a solution, the pivot thing didn’t work so I tried to mess about with things and found something that worked for me.

All I did was change the Slider > Fill Area > Fill > Image > Image Type from “Simple” to “Filled”, and voila it worked. The progress fill will stay fixed while moving the progress slider.

I had to adjust the fill area as well to my liking and anyone else may need to do the same.

And, To avoid the image getting condensed and thus distorting when the slider goes close to zero, use 9-slicing on the slider fill sprite image

check this link for a tutorial on 9-slicing: https://learn.unity.com/tutorial/using-9-slicing-for-scalable-sprites-2019-3

All you have to do in the 9-slicing is to leave the edged borders outside the selection area in the sprite editor (per the above tutorial) and hit apply, now when you move the slider close to zero the image will look like its getting cropped than getting smushed together.

** @salmannabi ** You crushed it! Thanks for saving me time! I didn’t even use 9-slicing though. The filled mode was enough to make my progress bar look good and fill correctly.

[igor24122006]

@salmannabi

Hi

This might be late but it might help someone else down the line, I ran into the same issue and ended up here while searching for a solution, the pivot thing didn’t work so I tried to mess about with things and found something that worked for me.

All I did was change the Slider > Fill Area > Fill > Image > Image Type from “Simple” to “Filled”, and voila it worked. The progress fill will stay fixed while moving the progress slider.

I had to adjust the fill area as well to my liking and anyone else may need to do the same.

And, To avoid the image getting condensed and thus distorting when the slider goes close to zero, use 9-slicing on the slider fill sprite image

check this link for a tutorial on 9-slicing: https://learn.unity.com/tutorial/using-9-slicing-for-scalable-sprites-2019-3

All you have to do in the 9-slicing is to leave the edged borders outside the selection area in the sprite editor (per the above tutorial) and hit apply, now when you move the slider close to zero the image will look like its getting cropped than getting smushed together.

Thank you very much

[akanesaki31]

@salmannabi

Hi

This might be late but it might help someone else down the line, I ran into the same issue and ended up here while searching for a solution, the pivot thing didn’t work so I tried to mess about with things and found something that worked for me.

All I did was change the Slider > Fill Area > Fill > Image > Image Type from “Simple” to “Filled”, and voila it worked. The progress fill will stay fixed while moving the progress slider.

I had to adjust the fill area as well to my liking and anyone else may need to do the same.

And, To avoid the image getting condensed and thus distorting when the slider goes close to zero, use 9-slicing on the slider fill sprite image

check this link for a tutorial on 9-slicing: https://learn.unity.com/tutorial/using-9-slicing-for-scalable-sprites-2019-3

All you have to do in the 9-slicing is to leave the edged borders outside the selection area in the sprite editor (per the above tutorial) and hit apply, now when you move the slider close to zero the image will look like its getting cropped than getting smushed together.

Thank you! I have been stuck with this for hours