如何防止滑块拉伸？

Question

熟悉jQuery UI。所以，这是我认为的一段代码：

<label id="min">
    5000</label>
<div id="slider">
</div>
<label id="max">
    9000</label>

脚本的一部分：

    $('#slider').slider({
        animate: true,
        range: true,
        min: 5000,
        max: 9000,
        values: [5000, 9000],
        slide: function (event, ui) {
            //doing smth
        }
    });    

一切正常，但滑块拉伸并占据整条线。标签位于其下方和下方。 我希望他们都在一条线上。

我该怎么做才能实现它？

修改

这就是我所期待的：

这就是我所拥有的：

修改

我尝试通过将以下代码添加到 Site.css 文件来覆盖滑块css：

.ui-slider .ui-slider-handle
{
    position: absolute;
    z-index: 2;
    width: 0.5em !important;
    height: 1.2em !important;
    cursor: default;
}

但没有改变。如何让jQuery使用这个css？

另一个注释：原始css看起来像这样：

.ui-slider .ui-slider-handle
{
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
}

那么，这是问题吗？或其他东西使我的滑块伸展？

更多

这是生成的html：

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <div class="ui-slider-range ui-widget-header" style="left: 25.95%; width: 74.05%;">
    </div>
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 25.95%;">
    </a>
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 100%;">
    </a>
</div>

最后

我必须覆盖.ui-slider课程，而不是.ui-slider .ui-slider-handle。那就是问题。

Rajesh Rolen- DotNet De，谢谢！

Answer 1

您可以设置滑块的宽度。 Change the width and height of jquery slider

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
width:1em !important;
height:1em !important;
 cursor: default;
}

http://tycoontalk.freelancer.com/css-forum/200419-jquery-css-slider-width-100-problem.html