JQuery滑块填充颜色

时间:2014-06-04 22:41:06

标签: javascript jquery html css jquery-slider

我正在尝试填充滑块的当前范围部分 - 正如许多其他人一样 - 陷入了一个坑!出于某种原因,当我移动我的栏时 - 该部分没有按预期“填充”颜色。

这是我的标记:

 <script>


//START OF AMOUNT CODE
var valMap = [1000, 1500, 2000, 2500];

$(function() {
    $("#amount-range").slider({
        min: 0,
        max: valMap.length - 1,
        value: 0,
        slide: function(event, ui) {                        
            $("#amount").val(valMap[ui.value]);                
        }       
    });
$("#amount").val(valMap[$("#amount-range").slider("values", 0)]);

//END OF AMOUNT    
});

  </script>
</head>
<body>
<div id="productDetails" style="width:360px; max-width:360px;">


<div id="amount-range" ></div>

我使用的CSS是:

.ui-slider-range { background: #88ac0b; }

我期待这是错误的......我也尝试过:

#amount-range.ui-slider-range { background: #88ac0b; }

无济于事 - 有人可以帮忙!

安迪

1 个答案:

答案 0 :(得分:1)

问题是因为我的滑块声明中缺少范围变量:

所以这现在有效(不完整的语法,但重要的组件是范围行!:

var durationSlider = $( "amount-slider)({
        min: 0,
        max: valMap.length - 1,
    range:"min",
        value: 0,
        slide: function(event, ui) {                        
            $("#amount").val(valMap[ui.value]);                
        }