How do you adjust the z-index of the jQuery UI slider?

Question

I have a jQuery UI slider on my page and it's sticking up through a dropdown menu.

Is there a way to adjust its z-index or does it need to be the topmost element on the page for some reason?

Faro

Answer 1

EDIT: Sorry, I just realized my answer related to DatePickers and you asked about dropdown menus. I'm going to leave the answer, as it still should help you solve the problem. Just make sure your dropdown menu z-index is set higher than 2 so the slider handles don't show through.

---

It appears that something changed in the DatePicker code in a recent jQuery-UI release. I used to prevent the handles of sliders from showing through my DatePickers with the following CSS:

.ui-datepicker {
  z-index: 4;
}

The handles of a Slider have a z-index of 2, so this would solve the problem. However, DatePicker now adds a z-index directly to the datepicker div element. This value overrides the .ui-datepicker value:

inst.dpDiv.zIndex($(input).zIndex()+1);

I attempted to set the z-index on my DatePicker's input to 4, but this didn't seem to work immediately. I'm sure if I spent more time on it, I could figure it out. Since I needed a quick solution, I just did this:

.ui-datepicker {
  z-index: 4 !important;
}

If that still doesn't work for you, try setting the value to 1000 or 10000 or something just to make sure you don't have other z-index's working against you.

Averyaveryl

Thank you Tauren. I tested this out using the jquery.minicolors.css color picker and it worked. – Motile

Answer 2

Although I'm not seeing a default z-index set on the slider when I include it. Check to see if the div you are turning into a slider has a z-index being set.

.ui-slider{
    z-index:1
}

Demos

Answer 3

Just set the z-index value for the handle of the slider in your CSS file:

.ui-slider .ui-slider-handle { z-index: 1; }  

As explained by W3Schools:

"The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order."

Indole