jQuery UI: Horizontal slider goes too far right

Question

I changed the appearance of the horizontal slider in jQuery UI to make it large and round, which looks great except the slider goes too far when you move it all the way to the right! http://jsfiddle.net/RXFn6/

How can this be remedied?

HTML

<h2 class="demoHeaders">Slider</h2>
<div id="slider"></div>

JavaScript

$(function() {
    $( "#slider" ).slider({
        range:"min",
        value:50
    });
});

CSS

/*! jQuery UI - v1.10.3 - 2013-06-30
* Copyright 2013 jQuery Foundation and other contributors Licensed MIT */

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ui-slider {
    position: relative;
    text-align: left;
}
.ui-slider .ui-slider-handle {    width:50px; 
    height:50px; 
    background:url(../images/slider_grabber.png) no-repeat; overflow: hidden; 
    position:absolute;
    top: -4px;
    border-style:none;  }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0;
border-radius: 33px 0 0 33px;
}

.ui-slider-horizontal { height: 2.5em; border-radius: 100px !important }
.ui-slider-horizontal .ui-slider-handle { margin-left: -.6em; z-index: 9000; max-width: 95% !important;
border-radius: 100px;}

.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
}


.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 1em;
}
.ui-widget-content { border: 1px solid #a6c9e2; background: #daa; color: #222222; }
.ui-widget-content a {
    color: #222222;
}
.ui-widget-header { border: 1px solid #4297d7; background: #ada; color: #ffffff; font-weight: bold; border-radius: 33px 0  0 33px; min-width: 33px;}
.ui-widget-header a {
    color: #ffffff;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: 1px solid #c5dbec;
    background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
    font-weight: bold;
    color: #2e6e9e;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: #2e6e9e;
    text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid #79b7e7;
    background: #d0e5f5 url(images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x;
    font-weight: bold;
    color: #1d5987;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
    color: #1d5987;
    text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border: 1px solid #79b7e7;
    background: #f5f8f9 url(images/ui-bg_inset-hard_100_f5f8f9_1x100.png) 50% 50% repeat-x;
    font-weight: bold;
    color: #e17009;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #e17009;
    text-decoration: none;
}

Answer 1

Fixed it: http://jsfiddle.net/RXFn6/3/

Here are the steps for resolving this issue:

1. Wrap slider in a div
2. Remove background and border from .ui-widget-content
3. Add background and border from (2) to wrapper div created in (1)
4. Set border-radius on wrapper, if necessary
5. Increase padding-right on wrapper until slider no longer looks like it goes off the track