Slider with offseted Foreground

[soy1bonus]

Hi, I'm trying to create a slider in which both the foreground and backgrounds are not in the middle of the widget itself. This is usually the case when doing console UI, like in this example: http://pcgamingwiki.com/images/thumb/1/1f/Call_of_Duty_-_Black_Ops_III_audio_settings.png/300px-Call_of_Duty_-_Black_Ops_III_audio_settings.png

I have a UISlider which has a Label on the left and the Foreground/Background/Thumb on the right, like in the previous image. The problem is that the UISlider seems to be using the Foreground size, but not it's offseted position. So the slider moves when I click&drag on the middle of the widget, and not on the right, where the foreground and thumb are.

What's the best way to fix this?

[wizardsmoke]

Hi, I'm trying to create a slider in which both the foreground and backgrounds are not in the middle of the widget itself. This is usually the case when doing console UI, like in this example: http://pcgamingwiki.com/images/thumb/1/1f/Call_of_Duty_-_Black_Ops_III_audio_settings.png/300px-Call_of_Duty_-_Black_Ops_III_audio_settings.png

I have a UISlider which has a Label on the left and the Foreground/Background/Thumb on the right, like in the previous image. The problem is that the UISlider seems to be using the Foreground size, but not it's offseted position. So the slider moves when I click&drag on the middle of the widget, and not on the right, where the foreground and thumb are.

What's the best way to fix this?

Not sure if we have enough information to answer your question.  It sounds like there might be a problem with the way your slider widgets are arranged in the hierarchy.  If you post a screenshot of your editor with the hierarchy and inspector, then we might be able to help you out.

[soy1bonus]

Ok, here's a screenshot.

I'll try to explain myself better 

My "Slider" widget has a label on the left, and the Background of the slider covers all the widget (I need the whole widget to glow red when it's hovered, not only the slider itself). The Foreground is on the right and only covers half the widget size.

When I hit play, it seems as if the slider was on the middle of the widget, not on the right. When you drag the cursor, the slider works, but the mouse is outside the slider. It seems the slider is using the Foreground size correctly, but not the offset.

(Background is gray, Foreground is Black and the Thumb is white)

[wizardsmoke]

Everything in your screenshot looks fine to me.  Perhaps there is a problem with the way that anchors may be set up on the foreground or background?

I suggest taking a look at the sliders in Example 0 to see if anything is different.

[soy1bonus]

Actually it behaves wrong in the examples as well. This is what I did:

- Open Example 0, and Select the gameobject "Control - Simple Horizontal Slider".
- Duplicate the "Foreground" gameobject and rename it as "Background".
- Move the Background and Foreground left anchors so that their value is 161 (around the middle of the widget)
- Hit play and try the slider and it behaves as it the slider background & foreground are in the middle, not in the right side which is where they really are.

I really don't know how to solve this.

[soy1bonus]

Ok, I think I fixed, but I had to change the NGUI code a little bit.

On the LocalToValue function of UIProgressBar it's only using the foreground size, but not it's position, so it assumes it's always on the center of the widget.

I added this lines to the top of the method so that the widget's offset is applied:

Vector3 offset = transform.InverseTransformPoint(mFG.transform.position);
localPos.x -= offset.x;
localPos.y -= offset.y;

[ArenMook]

Ok, I think I fixed, but I had to change the NGUI code a little bit.

On the LocalToValue function of UIProgressBar it's only using the foreground size, but not it's position, so it assumes it's always on the center of the widget.

I added this lines to the top of the method so that the widget's offset is applied:

Vector3 offset = transform.InverseTransformPoint(mFG.transform.position);
localPos.x -= offset.x;
localPos.y -= offset.y;

If I understood the post correctly, you should pay close attention to where the UIProgressBar/UISlider script is attached and the collider present. Duplicating a widget with a collider gives you 2 colliders, so your scaled background is now likely intercepting the events.

LocalToValue uses local coordinates (local corners) and the passed value is also local, so applying an offset would be a wrong thing to do.