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

Question

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

Navigation

#1 by (1 votes)
#2 by (-1 votes)

3

I'm working with bootstrap-slider and want to make the slider when being dragged , and have their value between certain number range (I use onChange ), modify the background color of the selection bar. I've been able to do the border modification, but the selection bar itself I could not 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"/><inputid="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"/><scripttype='text/javascript'src="http://seiyria.com/bootstrap-slider/js/bootstrap-slider.js" />
<!-- coloquem o JavaScript do código aqui -->

javascript jquery html5

asked by anonymous 27.08.2015 / 14:45

2 answers

-1

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

slider-track-high .

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

And get out of $(document).ready() , you do not have to.

27.08.2015 / 15:27

Link of an Iframe opening in new tab? Turn this menu into sub-menus?

score 1 · Accepted Answer

I did it! Actually the error was in the jQuery notation. The correct one 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 it is necessary that you remove background-image , since bootstrap-slider uses image in its CSS bootstrap-slider.css , so the background "did not appear" , because the image was "over."

Follow the code below:

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

    }

In addition, for future users who may have this problem, the class that treats the style sheet of the "ball that drags" or literally "tick ( track )" is just .slider-track