Customizing the horizontal slider

Has anyone had any luck customizing the horizontal slider in the the 2.0 GUI? I can't get my custom "thumb" to show up at all.

On a related note I'm having trouble getting my customizations of the Toggle to appear correctly. I am making a kind of radio button out of the Toggle, and want a triangle graphic, but I lose the tip of the triangle on the right.

Any help would be appreciated.

- Mike

 

I'm digging for info on this, as I know the sliders can be customized, but I haven't come up with the answer yet. Help is greatly appreciated.

http://unity3d.com/support/documentation/ScriptReference/GUILayout.HorizontalSlider.html

Where is the thumb pulled from exactly, in a GUIStyle ?

 

Ok, so, going with what I know so far about the GUI system (and this is my first day with it, so that's not a ton), it seems like trying to use GUIStyles to customize the sliders is broken. Here is some code that gives me invisible sliders (after assigning non-invisible textures, that is):

Code (csharp):

1. var beautician : GUIStyle;
2. var greatValue : float = 1.0;
3.  
4. function OnGUI () {
5.     greatValue = GUILayout.VerticalSlider (greatValue, 1.0, 0.0, beautician, beautician);
6. }

And here is some code that seems to work very well:

Code (csharp):

1. var prettify : GUISkin;
2. var greatValue : float = 1.0;
3.  
4. function OnGUI () {
5.     GUI.skin = prettify;
6.     greatValue = GUILayout.VerticalSlider (greatValue, 1.0, 0.0);
7. }

So, either the Skin method works and the Style method does not, or I just don't quite grasp how to use the Style method, which is very possible. Still, this simple code also works fine, so we may in fact have a bug.

Code (csharp):

1. var beautician : GUIStyle;
2.  
3. function OnGUI () {
4.     GUILayout.Label ("string beans", beautician);
5. }

 

The style for the slider thumb is found by taking the name of the slider, appending "thumb" to it and searching for that in the current GUI.skin

 

Yes, that certainly works, and is straightforward. However, the manual states in multiple places that non-skin GUIStyles can be used, and while that works for other controls, it does not appear to work for the sliders.

http://unity3d.com/support/documentation/ScriptReference/GUI.HorizontalSlider.html
http://unity3d.com/support/documentation/ScriptReference/GUI.VerticalSlider.html
http://unity3d.com/support/documentation/ScriptReference/GUILayout.HorizontalSlider.html
http://unity3d.com/support/documentation/ScriptReference/GUILayout.VerticalSlider.html

 

I use non-Skin GUIStyles for slider thumbs. The "trick" seems to be to have an sufficiently high amount of padding (for reasons I don't quite understand). The easiest way to learn setting thumbs up (IMO) is to create a slider using a default skin (the one you get with "Create->GUI Skin") then (in play mode) change the settings for the thumb one at a time and see the effect on the screen.

 

You need to make two GUIStyle components, one for the slider background and one for the Slider thumb. The slider thumb should have a padding i use 5 for all sides on padding. You need to make sure the background image for the slider background style and the slider thumb style are different or it will look funny and unless you are doing something fancy keep the same image on normal, hover, and active. adjust your settings for the styles in the editor window For example C# Script:

public GUIStyle backgroundStyle;
public GUIStyle thumbStyle;

void OnGUI(){

GUI.HorizontalSlider (new Rect (200, 300, 100, 30), sliderValue,0.0f, 100.0f, backgroundStyle, thumbStyle);

}

 

think of the first style as the background for the slider and the second style for the thumb if you use the same style for both then you will not see the thumb, i recommend you use two different styles.

 

I struggled with this for a while, until I actually read Boshay's post. I know this is an old thread, but I wanted to highlight the answer that finally did it so the next person would have an easier time.

The solution:

Create seperate styles for the slider bar and the slider thumb. Make sure to add padding to the slider thumb. The padding determines the size of the slider thumb, without that, you won't see your thumb because with a padding of 0 that means it has no size.