Customizing jQuery UI Slider height & width

css, jquery, jquery-ui, slider

Solution

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;`

Problem

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 }); ```

Original source