javascriptjqueryhtmlcssjquery-slider

JQuery slider fill colour

I am trying to fill the current range portion of my slider bar - and as a lot of other people have - fallen into a pit! For some reason when I move my bar - the portion does not 'fill' with a colour as expected.

This is my markup :

 <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>

The CSS I am using is:

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

I am expecting this to be wrong....I have also tried:

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

To no avail - can somebody please help!

Andy

Solution

  • The problem was because I had the range variable missing from my slider declaration:

    so this now works (not complete syntax but important component is the range line! :

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