Customizing jQuery UI Slider height & width

Question

When customizing the height/width of the jQuery UI Slider (and handle), the handle will now slide too far left (off of slider). Is there a recommended way of going about doing this?

Here's a fiddle to show you what I mean: http://jsfiddle.net/w7A4k/

I didn't see anything in the API Documentation for this, and I'm using a very basic setup:

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

Answer 1

Unit size of JQuery UI Slider is in em. Therefore slider size is relative to its font size.

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

Answer 2

Try

fiddle demo

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

---

To put the slider inside the bar add padding-left: 5px;