Menu
Hi I was using the same application which was demonstrated in one of the link Change color of selected section in bootstrap slider. Even after i use the same, i am not able to proceed. Can you please see and let me know the solution where i have done the mistakes. I have downloaded necessary .js and .css files into my system and referring them in my html page. This slider i am using for a feedback kind of. Few questions will follow with 10 options from 1 to 10. When the user selects 1 to 5, the slider should show "red" color (OK) , when its between 6 to 8 " Orange" (Good) and 9 to 10 is shows "Green" (Excellent) . Please find my below code and help me. Thanks in advance
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-slider.js"></script>
<link href="js/bootstrap-slider.css" rel="stylesheet">
<link href="js/bootstrap.min.css" rel="stylesheet">
<style>
#score .slider-selection {
background: yellow;
}
</style>
<script>
var r = $('#score').slider()
.on('slideStart', RGBChange)
.data('slider');
var RGBChange = function() {
alert("called");
if(r.getValue() >= 1 && r.getValue() <=5 ){
$('.slider-selection').css('background', 'red');
document.getElementById("lbl").value = r.getValue();
}
else if(r.getValue() > 5 && r.getValue() <=8 ){
$('.slider-selection').css('background', 'orange');
document.getElementById("lbl").value = r.getValue();
}
else if(r.getValue() >= 1 && r.getValue() <=5 )
};
</script>
<input
type="text"
Id = "score"
name="scoreSlide"
data-provide="slider"
data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
data-slider-ticks-labels='["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]'
data-slider-min="1"
data-slider-max="10"
data-slider-step="1"
data-slider-value="3",
data-slider-tooltip="hide"
/><br>
<input type="text" ID="lbl" />
901
The following code does what you asked. However, I don't think it looks great with the light blue handles/buttons.
<html>
<head>
<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">
</head>
<body>
<input
type="text"
Id = "score"
name="scoreSlide"
data-provide="slider"
data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
data-slider-ticks-labels='["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]'
data-slider-min="1"
data-slider-max="10"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide"
/>
<input type="text" id="lbl" />
<script>
var r = $('#score').slider()
.on('slideStop', function(ev){
var value = r.getValue();
if(value >= 1 && value <= 5){
$('.slider-selection').css('background', 'red');
}
else if(value > 5 && value <= 8) {
$('.slider-selection').css('background', 'orange');
}
else if(value > 8 && value <= 10) {
$('.slider-selection').css('background', 'green');
}
$('#lbl').val = value;
})
.data('slider');
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
