Wie man die Farbe des ausgewählten Abschnitts im Bootstrap-Schieberegler ändert

Hallo Ich habe die gleiche Anwendung verwendet, die in einem der Link Change color of selected section in bootstrap slider demonstriert wurde. Selbst nachdem ich das gleiche benutze, kann ich nicht fortfahren. Können Sie bitte sehen und lassen Sie mich die Lösung wissen, wo ich die Fehler gemacht habe. Ich habe notwendige .js und .css Akten in mein System gedownloadet und sie in meiner html Seite verwiesen. Dieser Schieberegler, den ich für eine Feedback-Art verwende. Wenige Fragen folgen mit 10 Optionen von 1 bis 10. Wenn der Benutzer 1 bis 5 auswählt, sollte der Schieberegler eine "rote" Farbe (OK) anzeigen, wenn zwischen 6 und 8 "Orange" (Gut) und 9 bis 10 angezeigt wird "Grün" (ausgezeichnet). Bitte finden Sie meinen untenstehenden Code und helfen Sie mir. Vielen Dank im VorausWie man die Farbe des ausgewählten Abschnitts im Bootstrap-Schieberegler ändert

<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" />

Quelle

2016-11-14 Sid

Können Sie einen JSFiddle-Link (oder etwas Ähnliches) bereitstellen? – tugce

Der folgende Code funktioniert, was Sie gefragt haben. Aber ich denke nicht, dass es mit den hellblauen Griffen/Knöpfen gut aussieht.

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

Quelle

2016-11-14 05:51:42 varlogtim

Wie man die Farbe des ausgewählten Abschnitts im Bootstrap-Schieberegler ändert

Antwort

Verwandte Themen