Javascript 移动幻灯片时，jQuery UI滑块填充背景

我目前正在构建一个jQueryUI滑块，这非常棒。我唯一没有做到的是填充处理程序已经传递的部分

我的目标是：

但我做到了这一点：

我已经在stackoverflow数据库中搜索过有相同问题的人，但他们的修复对我毫无帮助

谢谢你的正手击球

我的CSS：

.ui-slider-handle{
    background: #45a6ce !important;
    width: 10px !important;
    border: none !important;
    border-radius: 0px !important;
}

.ui-slider-horizontal .ui-slider-handle {

    top: -0.2em !important;
    margin-left: -.6em;
}

.ui-slider{
    width: 25%;
    padding-left: 5px;
    margin: 15px auto;
    background: #FFF !important; /* Darker color is: 57b4db */
    border: none !important;
    border-radius: 0px !important;
}

.ui-widget-content { background: purple; }

我的HTML：

        <script>
            $(function() {
                var valMap = [256, 512, 768, 1024, 1536, 2048, 2536, 3072, 3584, 4096, 6144];
                $("#slider-range-min").slider({
                    max: valMap.length - 1, // Set "max" attribute to array length
                    min: 0,
                    values: [0],
                    slide: function(event, ui) {
                        $("#amount").html(valMap[ui.values[0]] + 'MB');
                    }
                });
            });
        </script>

$（函数（）{
var valMap=[256、512、768、1024、1536、2048、2536、3072、3584、4096、6144]；
$（“#滑块最小范围”）.滑块({
max:valMap.length-1，//将“max”属性设置为数组长度
分:0,，
值：[0]，
幻灯片：功能（事件、用户界面）{
$（“#amount”）.html（valMap[ui.values[0]]+'MB'）；
}
});
});

参考并尝试如下更改您的js：

$(function() {
        var valMap = [256, 512, 768, 1024, 1536, 2048, 2536, 3072, 3584, 4096, 6144];
        $("#slider-range-min").slider({
            range: "min", // line added
            max: valMap.length - 1, // Set "max" attribute to array length
            min: 0,
            values: [0],
            slide: function(event, ui) {
                $("#amount").html(valMap[ui.values[0]] + 'MB');
            }
        });
    });

---

对不起，我忘了，我会在主要帖子中附上我的代码谢谢你的回答，很遗憾，它没有产生任何差异。你试过参考问题的解决方案吗？