Change the width and height of jQuery slider

Question

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?

Solution

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.