CODEWITHSUNDEEP
cssjquery-uioverridingjquery-ui-slider
Vivek
Vivek

Reputation: 4636

Change the width and height of jQuery slider

I want to change the width and height of jquery slider UI. I am using ui-lightness theme. I tried to override the default jquery.css by adding the following code in my style sheet.

.ui-slider .ui-slider-horizontal { height: .6em; }
.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1em;
  height: 1em;
  cursor: default;
}

But the above css has no effect. jquery.css overrides the above style and I see no change in the slider. How to override the default jquery.css styles?

Upvotes: 6

Views: 14915

Answers (1)

Andres I Perez
Andres I Perez

Reputation: 75379

Try adding the !important rule over after your width and height declaration, like so:

width:1em !important;
height:1em !important;

That should force your declaration to be read.

Upvotes: 5

Related Questions