javascript – How to change the background color of a bootstrap-slider plugin slider?

Question:

I'm working with bootstrap-slider and I want to make the slider to be dragged, and have its value between a certain number range (I use onChange ), modify the background color of the selection bar. I've already managed to modify the border, but the selection bar itself I couldn't find a shape with jQuery .

The code :

 $(document).ready(function() { $("#ex13").slider({ id: "slider12a", min: 0, max: 100, ticks: [0, 25, 50, 75, 100], ticks_snap_bounds: 5, ticks_labels: ['', '', '', '', ''], value: 0 }); }); function setarCorSlider(tamanho) { if (tamanho < 24) { document.getElementById('slider12a').style.background = "red"; //altera a borda, mas pelo meu entendimento se eu apelidei o slider 'ex13' de id: 'slider12a', deveria alterar tudo e não apenas a borda //tentei usar jQuery para alterar a cor da classe slider-selection, mas não funcionou $(document).ready(function() { $('.slider-selection').css('background: red'); }); //ou $('.slider-selection').css('background: red'); //também testei assim e não funcionou } else if (tamanho > 25 && tamanho < 74) { document.getElementById('slider12a').style.background = "yellow"; } else if (tamanho > 75) { document.getElementById('slider12a').style.background = "green"; } }
 #slider12a .slider-selection { background: #DDD; //*Inicialmente a barra possui o background da barra azul, a medida que vai arrastando ela* }
 <link href="http://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet" /> <link href="http://seiyria.com/bootstrap-slider/dependencies/css/bootstrap.min.css" rel="stylesheet" /> <script type='text/javascript' src="http://seiyria.com/bootstrap-slider/dependencies/js/modernizr.js" /> <input id="ex13" type="text" data-slider-ticks="[0, 25, 50, 75, 100]" data-slider-ticks-snap-bounds="5" onchange="setarCorSlider(this.value)" /> <script type='text/javascript' src="http://seiyria.com/bootstrap-slider/dependencies/js/jquery.min.js" /> <script type='text/javascript' src="http://seiyria.com/bootstrap-slider/js/bootstrap-slider.js" /> <!-- coloquem o JavaScript do código aqui -->

Answer:

I achieved! In fact the error was in the jQuery notation, the correct thing is to pass the two separate parameters, 'background-color' and then the parameter with the value of the color.

$('#slider12a .slider-selection').css('background-color','#F55');

And the other problem is that, in addition to setting the code, you need to remove the background-image , because the bootstrap-slider uses an image in your CSS bootstrap-slider.css so the background "didn't show" because the image was "over the top".

Follow code:

function setarCorSlider(tamanho){

        if (tamanho<24){
                $('#slider12a .slider-selection').css('background-image','none');
                $('#slider12a .slider-selection').css('background-color','#F55');
        }
        else if (tamanho>25 && tamanho<74){
            $('#slider12a .slider-selection').css('background-image','none');
            $('#slider12a .slider-selection').css('background-color','#FFA477');            
        }
        else if (tamanho>75){
            $('#slider12a .slider-selection').css('background-image','none');
            $('#slider12a .slider-selection').css('background-color','#93FF93');
        }

    }

Also, for future users who might have this problem, the class that handles the style sheet of the "sliding ball" or in literal translation "tick ( track )" is precisely the .slider-track

Scroll to Top