Slider zeigt ähnliche Kästchen im Browser an, funktioniert aber gut in Fiddle (Kein Fehler in der Konsole)

Ich implementiere Slider, der in Fiddle (Working) funktioniert, aber wenn er in Browser implementiert wird, zeigt er ähnliche Kästchen an. Hier ist das Bild von, wie es in Browser zeigt.Slider zeigt ähnliche Kästchen im Browser an, funktioniert aber gut in Fiddle (Kein Fehler in der Konsole)

code.html

<html lang="en"> 
     <head> 
      <meta charset="utf-8"> 
      <title>jQuery UI Slider - Multiple sliders</title> 

      <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
      <script src="jquery-ui.js"></script> 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
      <link rel="stylesheet" href="jquery-ui.css"> 
     <!-- <script src="jquery-1.10.2.js"></script> --> 

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css" > 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script> 

      <link rel="stylesheet" href="style.css"> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
     </head> 

        <div class = "row"> 
       <div class = "col-md-12"> 
       <div class="wrapper4"> 
       <p style = "text-align:center"> 
       Subject Skill 
       </p> 
       <input id="ex16" data-slider-id='ex16Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" style="width: 100%; text-align:center;"/> 

       </div> 
       </div> 

       <div class = "col-md-12"> 
       <div class = "col-md-4"> 

       <div class="wrapper"> 
       <hr /> 
       <p> 
       Technical/Analytical 
       </p> 

       <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="1" style="text-align: center"/> 
        <hr /> 
        <input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex4" data-slider-id='ex4Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex5" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex17" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex18" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 

       </div> 
       </div> 

       <div class = "col-md-4"> 

       <div class="wrapper"> 
       <hr /> 
       <p> 
       Problem Solving 
       </p> 

        <input id="ex6" data-slider-id='ex6Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="1" /> 
        <hr /> 
        <input id="ex7" data-slider-id='ex7Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex8" data-slider-id='ex8Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex9" data-slider-id='ex9Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex10" data-slider-id='ex10Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 

       </div> 

       </div> 

       <div class = "col-md-4"> 
       <hr /> 
       <div class="wrapper"> 
       <p> 
       Communication 
       </p> 

        <input id="ex11" data-slider-id='ex11Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="1" /> 
        <hr /> 
        <input id="ex12" data-slider-id='ex12Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex13" data-slider-id='ex13Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex14" data-slider-id='ex14Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex15" data-slider-id='ex15Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 

       </div> 

       </div> 
       </div> 

          </body> 
          </html>

sli.js

 <script> 
     $('#ex1').slider({ 
      value : 26, 
      formatter: function(value) { 
       return 'ABCD: ' + value; 
      } 
     }); 


     $('#ex2').slider({ 
      value : 2, 
      tooltip_position:'bottom', 
      reversed : true, 
      formatter: function(value) { 
       return 'A: ' + value; 
      } 
     }); 


     $('#ex3').slider({ 
      value : 6, 
      reversed : true, 
      formatter: function(value) { 
       return 'B: ' + value; 
      } 
     }); 


     $('#ex4').slider({ 
      value : 8, 
      reversed : true, 
      formatter: function(value) { 
       return 'C: ' + value; 
      } 
     }); 


     $('#ex5').slider({ 
      value : 4, 
      reversed : true, 
      formatter: function(value) { 
       return 'D: ' + value; 
      } 
     }); 

     $('#ex17').slider({ 
      value : 2, 
      reversed : true, 
      formatter: function(value) { 
       return 'D: ' + value; 
      } 
     }); 

     $('#ex18').slider({ 
      value : 5, 
      reversed : true, 
      formatter: function(value) { 
       return 'D: ' + value; 
      } 
     }); 


     $('#ex6').slider({ 
      value : 24, 
      formatter: function(value) { 
       return 'EFGH: ' + value; 
      } 
     }); 


     $('#ex7').slider({ 
      value : 9, 
      reversed : true, 
      formatter: function(value) { 
       return 'E: ' + value; 
      } 
     }); 


     $('#ex8').slider({ 
      value : 5, 
      reversed : true, 
      formatter: function(value) { 
       return 'F: ' + value; 
      } 
     }); 


     $('#ex9').slider({ 
      value : 3, 
      reversed : true, 
      formatter: function(value) { 
       return 'G: ' + value; 
      } 
     }); 


     $('#ex10').slider({ 
      value : 7, 
      reversed : true, 
      formatter: function(value) { 
       return 'H: ' + value; 
      } 
     }); 


     $('#ex11').slider({ 
      value : 34, 
      formatter: function(value) { 
       return 'EFGH: ' + value; 
      } 
     }); 


     $('#ex12').slider({ 
      value : 8, 
      reversed : true, 
      formatter: function(value) { 
       return 'E: ' + value; 
      } 
     }); 


     $('#ex13').slider({ 
      value : 5, 
      reversed : true, 
      formatter: function(value) { 
       return 'F: ' + value; 
      } 
     }); 


     $('#ex14').slider({ 
      value : 10, 
      reversed : true, 
      formatter: function(value) { 
       return 'G: ' + value; 
      } 
     }); 


     $('#ex15').slider({ 
      value : 11, 
      reversed : true, 
      formatter: function(value) { 
       return 'H: ' + value; 
      } 
     }); 

     $('#ex16').slider({ 
      value : 84, 
      formatter: function(value) { 
       return 'ABCDEFGH: ' + value; 
      } 
     }); 

     // If you want to change slider using Sub-Skills 
     $("#ex2,#ex3,#ex4,#ex5,#ex17,#ex18").on("slide", function() { 
     $('#ex1').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue')+ $('#ex17').slider('getValue')+ $('#ex18').slider('getValue')); 
     }); 

     // If you want to change slider using Sub-Skills 
     $("#ex7,#ex8,#ex9,#ex10").on("slide", function() { 
     $('#ex6').slider('setValue', $('#ex7').slider('getValue') + $('#ex8').slider('getValue')+ $('#ex9').slider('getValue')+ $('#ex10').slider('getValue')); 
     }); 

     // If you want to change slider using Sub-Skills 
     $("#ex12,#ex13,#ex14,#ex15").on("slide", function() { 
     $('#ex11').slider('setValue', $('#ex12').slider('getValue') + $('#ex13').slider('getValue')+ $('#ex14').slider('getValue')+ $('#ex15').slider('getValue')); 
     }); 

     // If you want to change slider using Main Skills 
     $("#ex2,#ex3,#ex4,#ex5,#ex7,#ex8,#ex9,#ex10,#ex12,#ex13,#ex14,#ex15").on("slide", function() { 
     $('#ex16').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue')+ $('#ex7').slider('getValue')+ $('#ex8').slider('getValue')+ $('#ex9').slider('getValue')+ $('#ex10').slider('getValue')+ $('#ex12').slider('getValue')+ $('#ex13').slider('getValue')+ $('#ex14').slider('getValue')+ $('#ex15').slider('getValue')); 
     });

Es gibt keine Fehler in der Konsole kommen, ich habe fast alle notwendigen Dateien einschließlich CSS enthalten. Aber immernoch sind nur Boxen sichtbar, aber keine Schieberegler.

Könntest du bitte darauf hinweisen, was ein Fehler sein könnte, da ich für ziemlich tauige Tage daran kämpfe.

Quelle

2016-08-08 newcomer

ich denke, sein Vorkommnis weil '.slider()' 'in beiden jQuery-ui' vorhanden ist, sowie in' Bootstrap-Schieber '. In Fiddle haben Sie 'jQuery-ui' nicht hinzugefügt, daher arbeitet es dort mit' bootstrap-slider'. Bitte verwalten Sie Ihre Plugins entsprechend. – vijayP

Ich tat das, ich kommentierte sowohl jquery-ui.js und .css, aber es ist immer noch die gleiche – newcomer

ist Ihre über HTML ist die, die Sie überprüfen? Ich sehe kein schließendes '' Tag. – vijayP

Versuchen und führen Sie diesen Code auf Chrom für mich seine adaequat

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
<title>jQuery UI Slider - Multiple sliders</title> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css" > 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script> 
<script> 
$(document).ready(function(){ 

$('#ex1').slider({ 
      value : 26, 
      formatter: function(value) { 
       return 'ABCD: ' + value; 
      } 
     }); 


     $('#ex2').slider({ 
      value : 2, 
      tooltip_position:'bottom', 
      reversed : true, 
      formatter: function(value) { 
       return 'A: ' + value; 
      } 
     }); 


     $('#ex3').slider({ 
      value : 6, 
      reversed : true, 
      formatter: function(value) { 
       return 'B: ' + value; 
      } 
     }); 


     $('#ex4').slider({ 
      value : 8, 
      reversed : true, 
      formatter: function(value) { 
       return 'C: ' + value; 
      } 
     }); 


     $('#ex5').slider({ 
      value : 4, 
      reversed : true, 
      formatter: function(value) { 
       return 'D: ' + value; 
      } 
     }); 

     $('#ex17').slider({ 
      value : 2, 
      reversed : true, 
      formatter: function(value) { 
       return 'D: ' + value; 
      } 
     }); 

     $('#ex18').slider({ 
      value : 5, 
      reversed : true, 
      formatter: function(value) { 
       return 'D: ' + value; 
      } 
     }); 


     $('#ex6').slider({ 
      value : 24, 
      formatter: function(value) { 
       return 'EFGH: ' + value; 
      } 
     }); 


     $('#ex7').slider({ 
      value : 9, 
      reversed : true, 
      formatter: function(value) { 
       return 'E: ' + value; 
      } 
     }); 


     $('#ex8').slider({ 
      value : 5, 
      reversed : true, 
      formatter: function(value) { 
       return 'F: ' + value; 
      } 
     }); 


     $('#ex9').slider({ 
      value : 3, 
      reversed : true, 
      formatter: function(value) { 
       return 'G: ' + value; 
      } 
     }); 


     $('#ex10').slider({ 
      value : 7, 
      reversed : true, 
      formatter: function(value) { 
       return 'H: ' + value; 
      } 
     }); 


     $('#ex11').slider({ 
      value : 34, 
      formatter: function(value) { 
       return 'EFGH: ' + value; 
      } 
     }); 


     $('#ex12').slider({ 
      value : 8, 
      reversed : true, 
      formatter: function(value) { 
       return 'E: ' + value; 
      } 
     }); 


     $('#ex13').slider({ 
      value : 5, 
      reversed : true, 
      formatter: function(value) { 
       return 'F: ' + value; 
      } 
     }); 


     $('#ex14').slider({ 
      value : 10, 
      reversed : true, 
      formatter: function(value) { 
       return 'G: ' + value; 
      } 
     }); 


     $('#ex15').slider({ 
      value : 11, 
      reversed : true, 
      formatter: function(value) { 
       return 'H: ' + value; 
      } 
     }); 

     $('#ex16').slider({ 
      value : 84, 
      formatter: function(value) { 
       return 'ABCDEFGH: ' + value; 
      } 
     }); 

     // If you want to change slider using Sub-Skills 
     $("#ex2,#ex3,#ex4,#ex5,#ex17,#ex18").on("slide", function() { 
     $('#ex1').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue')+ $('#ex17').slider('getValue')+ $('#ex18').slider('getValue')); 
     }); 

     // If you want to change slider using Sub-Skills 
     $("#ex7,#ex8,#ex9,#ex10").on("slide", function() { 
     $('#ex6').slider('setValue', $('#ex7').slider('getValue') + $('#ex8').slider('getValue')+ $('#ex9').slider('getValue')+ $('#ex10').slider('getValue')); 
     }); 

     // If you want to change slider using Sub-Skills 
     $("#ex12,#ex13,#ex14,#ex15").on("slide", function() { 
     $('#ex11').slider('setValue', $('#ex12').slider('getValue') + $('#ex13').slider('getValue')+ $('#ex14').slider('getValue')+ $('#ex15').slider('getValue')); 
     }); 

     // If you want to change slider using Main Skills 
     $("#ex2,#ex3,#ex4,#ex5,#ex7,#ex8,#ex9,#ex10,#ex12,#ex13,#ex14,#ex15").on("slide", function() { 
     $('#ex16').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue')+ $('#ex7').slider('getValue')+ $('#ex8').slider('getValue')+ $('#ex9').slider('getValue')+ $('#ex10').slider('getValue')+ $('#ex12').slider('getValue')+ $('#ex13').slider('getValue')+ $('#ex14').slider('getValue')+ $('#ex15').slider('getValue')); 
     }); 

}); 
</script> 

</head> 
<body> 
    <div class = "row"> 
       <div class = "col-md-12"> 
       <div class="wrapper4"> 
       <p style = "text-align:center"> 
       Subject Skill 
       </p> 
       <input id="ex16" data-slider-id='ex16Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" style="width: 100%; text-align:center;"/> 

       </div> 
       </div> 

       <div class = "col-md-12"> 
       <div class = "col-md-4"> 

       <div class="wrapper"> 
       <hr /> 
       <p> 
       Technical/Analytical 
       </p> 

       <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="1" style="text-align: center"/> 
        <hr /> 
        <input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex4" data-slider-id='ex4Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex5" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex17" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex18" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 

       </div> 
       </div> 

       <div class = "col-md-4"> 

       <div class="wrapper"> 
       <hr /> 
       <p> 
       Problem Solving 
       </p> 

        <input id="ex6" data-slider-id='ex6Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="1" /> 
        <hr /> 
        <input id="ex7" data-slider-id='ex7Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex8" data-slider-id='ex8Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex9" data-slider-id='ex9Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex10" data-slider-id='ex10Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 

       </div> 

       </div> 

       <div class = "col-md-4"> 
       <hr /> 
       <div class="wrapper"> 
       <p> 
       Communication 
       </p> 

        <input id="ex11" data-slider-id='ex11Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="1" /> 
        <hr /> 
        <input id="ex12" data-slider-id='ex12Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex13" data-slider-id='ex13Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex14" data-slider-id='ex14Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 
       <input id="ex15" data-slider-id='ex15Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" /> 

       </div> 

       </div> 
       </div> 
</body> 
</html>

Quelle

2016-08-08 10:08:30

Nein, es machte nur Elemente kleiner, das ist alles. Und nicht mit jquery-ui – newcomer

Versuchen Sie, den oben genannten Code in Chrom –

Ich habe den Fehler, ich war nicht mit $ (Dokument) .ready (function() in der Skriptdatei. – newcomer

Slider zeigt ähnliche Kästchen im Browser an, funktioniert aber gut in Fiddle (Kein Fehler in der Konsole)

Antwort

Verwandte Themen