newcomer newcomer - 3 months ago 10
CSS Question

Slider showing like boxes in Browser but working fine in Fiddle (No Error Showing in Console)

I am implementing Slider which is working fine in Fiddle (Working), but showing like boxes when implemented in Browser. Here is the Picture PICTURE of how it 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 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'));
});


There is no error coming in the console, I have included almost all the necessary files including css. But still only boxes are visible but not sliders.

Could you please point out, what could be error, as I am struggling on it for quite dew days.

Answer

Try and run this code on chrome its working fine for 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 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>
Comments