jQuery UI slider fill background when slide is moved

Question

I am currently building a jQuery ui Slider, this is going great. The only thing im not getting achieved is filling the part that is already passed by the handler.

My goal is this:

https://snapr.pw/i/2352b228e2.png

But I got as far as this:

https://snapr.pw/i/a6ad568ca1.png

I have already searched the stackoverflow database for people having the same issue, but their fixes did not help me at all.

Thanks on forehand.

My 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; }

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

Sorry, I forgot, I will attach my code in main post – Dennis Smink Jun 28 '15 at 13:20 — Dennis Smink, Jun 28 '15 at 13:20

score 0 · Answer 1 · edited May 23 '17 at 12:33

0

Referring to documentation and this SO question try changing your js like this:

$(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');
            }
        });
    });

edited May 23 '17 at 12:33

Community

1
1

answered Jun 28 '15 at 13:36

Michał

2,456
4
26
33

Thank you for your answer, sadly enough it did not make any diffrence. – Dennis Smink Jun 28 '15 at 15:49
Did you try the solution from referred question? – Michał Jun 28 '15 at 15:50

jQuery UI slider fill background when slide is moved

1 Answers1