How to change appearance of jQueryUI slider bar?

Question

I need a drag slider bar for my webpage. This is how the jQuery slider provided in www.jqueryui.com/slider/ looks like:

Let's agree upon the fact that it looks ugly.

So, assume I made two PNG files in Photoshop, one for the bar and one for the handle. Is there any way to redesign this gray, monotonous slider with my awesome images?

If you have another designable slider recommendation other than jQuery, that's also welcome.

Thanks in advance.

Answer 1

Here is the Link to the API page

There is a paragraph which explains theming:

Theming

The slider widget uses the jQuery UI CSS framework to style its look and feel. If slider specific styling is needed, the following CSS class names can be used:

ui-slider: The track of the slider control. This element will additionally have a class name of ui-slider-horizontal or ui-slider-vertical depending on the orientation of the slider.

ui-slider-handle: The slider handles.

ui-slider-range: The selected range used when the range option is set. This element can additionally have a class of ui-slider-range-min or ui-slider-range-max if the range option is set to "min" or "max" respectively.

As you asked in comments an example Fiddle