Q:

Como alterar a cor do background de um slider do plugin bootstrap-slider?

estou trabalhando com bootstrap-slider e quero fazer com que o slider ao ser arrastado, e ter o seu valor entre determinado intervalo de número (utilizo onChange), modificar a cor do background da barra de seleção. Já consegui fazer a modificação da borda, mas a barra de seleção em si eu não consegui encontrar uma forma com jQuery. 
O código :

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

A:

Consegui! Na verdade o erro estava na notação jQuery o correto é passar os dois parâmetros separados, 'background-color' e em seguida o parâmetro com o value da cor. 
$('#slider12a .slider-selection').css('background-color','#F55');

E o outro problema é que além de setar o código é necessário que você remova o background-image, pois o bootstrap-slider utiliza imagem no seu CSS bootstrap-slider.css por isso, o plano de fundo "não aparecia", pois a imagem estava "por cima".
Segue código:
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');
        }

    }

Além disso, para futuros usuários que possam ter esse problema, a classe que trata da folha de estilo da "bolinha que arrasta" ou em tradução literal "carrapato (track)" é justamente a .slider-track

