JQuery UI Customization Slider Height and Width

Question

When adjusting the height / width of the jQuery UI slider (and descriptor), the handle now moves too far to the left (from the slider). Is there a recommended way to do this?

Here is a script to show you what I mean: http://jsfiddle.net/w7A4k/

I have not seen anything in the API documentation , and I am using a very basic setup:

$("#slider").slider({ orientation: "horizontal", max: 100, min: 0 }); 

Answer 1

Try

script demonstration

 .ui-slider .ui-slider-handle { height: 15px; width: 5px; padding-left: 5px; //add this } 

---

To place the slider in the panel, add padding-left: 5px;

Answer 2

The jQuery UI Slider block size is in em . Therefore, the size of the slider is relative to its font size.

• Change the font size of the div slider to handle the HEIGHT slider.
• Change the width of the container slider to control the WIDTH slider.