javascriptjquerycssbootstrap-slider
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 
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.
Solution
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>
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices