1

I am using bootstrap slider in my code. I am able to get the slider working. My requirement is to change the color of the selected section of the slider based on the value chosen. I am able to change the color but with such a delay. I have tried displaying the value chosen in another input box which again takes longer to reflect. I am not sure if this is because of delayed response/ the code is not right. This must be quite simple but I am stuck as I am a JS newbie. Any help would be highly appreciated. Here's the code I have used. Thanks in advance!

FILES INCLUDED:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script src="http://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
    <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">

HTML 

<input
type="text"
Id = "score"
name="scoreSlide"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["short", "medium", "long"]'
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide"
/>
<input type="text" ID="lbl" />

JAVA SCRIPT/ JQUERY

<script>
var RGBChange = function() {
if(r.getValue() ==1 ){
$('.slider-selection').css('background', 'red');
document.getElementById("lbl").value = r.getValue();
}
else{
$('.slider-selection').css('background', 'green');
document.getElementById("lbl").value = r.getValue();
}

};

var r = $('#score').slider()
    .on('slide', RGBChange)
    .data('slider');

</script>
Linda
  • 147
  • 2
  • 20

1 Answers1

1

Try to use slideStart instead of Slide like this:

var r = $('#score').slider()
.on('slideStart', RGBChange)
.data('slider');
Aschab
  • 1,378
  • 2
  • 14
  • 31
  • Thank you Aschab! This has made it work faster. But there is another issue now: It works perfectly on double clicking the points. The values are matching the definition (1 , 2, 3) On single click, the values are jumbled ( as in, it becomes 3, 1, 2) Any idea why? – Linda Oct 04 '16 at 04:39
  • I changed 'slideStart' to 'slideStop' and it worked perfectly. Thanks again! @Aschab – Linda Oct 04 '16 at 04:56