javascript - Slider showing like boxes in Browser but working fine in Fiddle (No Error Showing in Console) -
i implementing slider working fine in fiddle (working), showing boxes when implemented in browser. here picture 
of how shows in browser.
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 want 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 want 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 want 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 want 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')); }); there no error coming in console, have included necessary files including css. still boxes visible not sliders.
could please point out, error, struggling on quite dew days.
try , run code on chrome working fine me
<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 want 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 want 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 want 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 want 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>
Comments
Post a Comment