CODEWITHSUNDEEP
javascripthtmljquery-ui
Doruk Karınca
Doruk Karınca

Reputation: 287

How to change appearance of jQueryUI slider bar?

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

jQuery Slider Bar UI

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.

Upvotes: 0

Views: 1947

Answers (1)

Max Novich
Max Novich

Reputation: 1169

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

    Upvotes: 3

    Related Questions