jQuery UI：水平滑塊過於偏右

我改變了jQuery UI中水平滑塊的外觀，使它變得又大又圓，除非滑塊一直移動到最右邊，否則滑塊變得太遠了！ enter image description here http://jsfiddle.net/RXFn6/jQuery UI：水平滑塊過於偏右

這怎麼解決？

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

來源

2013-07-20 Muhd

不幸的是，你必須在滑塊上添加一個包裝並在其上應用填充填充 – Hushme