create custom Horizontal slider

Well.. I got my answer from here http://forum.unity3d.com/threads/7037-Customizing-the-horizontal-slider

However, I still cannot see the SliderThumb! I can see the slider but not my customized Thumb(which is a texture under Normal in GUISkin).

The GUIskin works a bit different. The default styles are just used like any other custom styles you've defined in the skin. The point is when you use the slider function without an explicit style it uses the default style.

Replacing default styles in code usually leads to problems. The GUISkin is one of the things that does remember changes across the playmode / editmode border. So by doing what you've done above you've probably overridden the default style in your GUISkin with your custom style.

Next thing is Unity has implemented an implicit cast between string and GUIStyle. Just set your skin as current skin (like you did) and call the slider that way:

 GUI.skin = this.evoGUISkin;
 lightScrollBar = GUI.HorizontalSlider (scaleRect (1076, 405, 500, 250), lightScrollBar, 0.0f, 10.0f, "Page1Slider", "Page1SliderThumb");

Make sure your thumb has a fixed size and does not strech. You can just tart your game and play around in the GUISkin. You will see the changes in realtime and they are kept, so watchout what you delete ;). It's usually quite useful when you have a new blank GUISkin with the default settings unchanged to compare the settings. You usually just replace the background textures and might have to adjust the fixedSize.

edit

I've creates a very simple example scene which just displays 3 sliders with 3 different styles (actually 6). Just import it into a Unity project and open the "scene" file inside the "0SliderExamples" folder which should appear at the top of your project window ;).

Just open the scene and press play. During playmode select the GUISkin (MySkin) in the project window and expand the custom styles at the very bottom of the inspector. There you will see 6 custom styles which are used by the 3 sliders. Take a close look at the different settings.

The 8 stylestates (normal, hover, active, focused, on...) should be quite obvious. You actually don't need all them. Just the normal state should be enough as long as the other states have "none" as texture ;)

The important settings are: Border, Padding, Margin (only when you use GUILayout), Overflow, ImagePosition, Alignment, Fixed Width / Height.

Also note what fixed Height really do. Usually the size of elements are specified by it's Rect. The Rect is also the area in which user interactions are recognised. Graphics can "overflow" this area. Keep in mind when you specify a smaller height in the Rect than the fixed Width / Height does not make the slider smaller. The graphics will overlap but user interactions only works in the rect specified.

You can set your fixed Height / width to 0, in this case the graphics always stretch to the given Rect size.

Border will influence how many pixels from each edge are NOT stretched. Setting all to 0 will stretch the whole image.

Overflow adds to or subtracts from the target size. This could be a fixed size or the streched size you get from the rect.

The other settings should be clear. If not, just play with them.