Question

我目前正在构建一个jQuery ui Slider，这很棒。我唯一没有实现的就是填充处理程序已经传递的部分。

我的目标是：

但我得到了这个：

我已经在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>

Answer 1

参考documentation和this SO question尝试更改您的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');
            }
        });
    });

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

1 个答案: