jQuery Slider样式定制：实现圆形手柄及背景颜色分区显示

没问题！要把你的范围滑块改成圆形手柄+绿灰区分的轨道，只需要通过CSS覆盖jQuery UI滑块的默认样式类就行。下面是具体的实现步骤和完整代码：

核心CSS修改说明 #

jQuery UI滑块的样式是通过特定类名控制的，我们需要覆盖以下几个关键类：

• .ui-slider-handle：控制滑块手柄样式，设置圆形只需要border-radius: 50%并保证宽高一致
• .ui-slider：控制整个滑块轨道的背景（未选中区域），设置为灰色
• .ui-slider-range：控制两个手柄之间的选中区域，设置为绿色

完整代码示例 #

HTML（和你的代码一致，无需修改） #

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form>
    <div class="slidersStyle">
        <span id="spanMax" style="display: inline-block;" class="sliderValue">1</span>
        <div style="width:200px; margin-left: 15px; margin-right: 15px;" id="slider">
        </div>
        <span id="spanMin" class="sliderValue">100</span>
    </div>
</form>

JavaScript（修正了显示值的小错误，原来把最小值和最大值的显示搞反了） #

$(document).ready(function() {
    $("#slider").slider({
        min: 1,
        max: 100,
        step: 1,
        values: [1, 100],
        slide: function(event, ui) {
            if ( ui.values[0] >= ui.values[1] ) {
                return false;
            } else {
                // 修正：ui.values[0]是最小值，对应spanMin；ui.values[1]是最大值，对应spanMax
                document.getElementById("spanMin").textContent = ui.values[0];
                document.getElementById("spanMax").textContent = ui.values[1];
            }
        }
    });
    $("input.sliderValue").change(function() {
        var $this = $(this);
        $("#slider").slider("values", $this.data("index"), $this.val());
    });
});

CSS（添加了滑块样式的自定义代码） #

body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
}
.slidersStyle div, span {
    display: inline-block;
}

/* 自定义滑块样式开始 */
/* 整个滑块轨道：未选中区域设为灰色 */
#slider.ui-slider {
    background-color: #cccccc;
    border: none;
    height: 6px;
}

/* 选中的范围区域：设为绿色 */
#slider .ui-slider-range {
    background-color: #4CAF50;
    border: none;
}

/* 滑块手柄：设置为圆形 */
#slider .ui-slider-handle {
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid #4CAF50;
    width: 16px;
    height: 16px;
    top: -6px; /* 调整位置让手柄垂直居中 */
    margin-left: -8px; /* 调整位置让手柄水平居中 */
}
/* 自定义滑块样式结束 */

效果说明 #

• 手柄变成白色圆形，带绿色边框，和选中区域颜色呼应
• 滑块轨道未选中部分是浅灰色，两个手柄之间的选中部分是绿色
• 同时修正了你JS里的小bug：确保spanMin显示最小值，spanMax显示最大值

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup