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

Question

I’m working with bootstrap-slider and want to make the slider when dragging, and having its value between a given 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 1

I did it! Actually the error was in the notation jQuery the correct is to pass the two separate parameters, 'background-color' and then the parameter with the value of 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, for the bootstrap-slider uses image in your CSS bootstrap-slider.css so the background "did not appear", because the image was "on top".

Follows 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 may have this problem, the class that deals with the style sheet of the "dragging ball" or in literal translation "tick (track)" is just the .slider-track

Answer 2

The class in which the background color changes is this one:

slider-track-high.

Put this into the function setarCorSlider. $('.slider-track-high').css('background-color', 'red');

And take it from inside the $(document).ready(), no need.