Ossi Ossi - 5 months ago 25
jQuery Question

Js doesnt work although no errors is present

I have a jsfiddle where the range-sliders worked fine until sometime ago.

dont know what went wrong, and can't find the error.

Basically its 6 range-slider which can should result in a total result based on where you position the sliders.

$(document).ready(function() {
$("#slider1").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});

$("#slider2").slider({
min: 0,
max: 250,
slide: function(event, ui) {
update();
}
});

$("#slider3").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});

$("#slider4").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});

$("#slider5").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});

$("#slider6").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});

update(); };
}),

function update() {
$("#amount").val($amount1);
$("#amount2").val($amount2);
$("#amount3").val($amount3);
$("#amount4").val($amount4);
$("#amount5").val($amount5);
$("#amount6").val($amount6);
$("#amount7").val($amount7);
$("#gbamount").val($gbamount);
$("#gbamount2").val($gbamount2);
$("#gbamount3").val($gbamount3);
$("#gbamount4").val($gbamount4);
$("#gbamount5").val($gbamount5);
$("#gbamount6").val($gbamount6);

$amount1 = $("#slider1").slider("values", 0);
$amount2 = $("#slider2").slider("values", 0);
$amount3 = $("#slider3").slider("values", 0);
$amount4 = $("#slider4").slider("values", 0);
$amount5 = $("#slider5").slider("values", 0);
$amount6 = $("#slider6").slider("values", 0);
$gbamount = ($amount1 * 3 / 1024).toFixed(2);
$gbamount2 = ($amount2 * 30 / 10240).toFixed(2);
$gbamount3 = ($amount3 * (1.43333333 * 30) / 1024).toFixed(2);
$gbamount4 = ($amount4 * (10 * 60) / 8 / 1024).toFixed(2);
$gbamount5 = ($amount5 * (30 * 60) / 8 / 1024).toFixed(2);
$gbamount6 = ($amount6 * (30 * 0.1666666667) / 1024).toFixed(2);
$amount7 = ($gbamount + $gbamount2 + $gbamount3 + $gbamount4 + $gbamount5 + $gbamount6).toFixed(2);

};


https://jsfiddle.net/jossiossi/b7tqtwnL/2/

Answer

Hi please make sure to include the library

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

check here

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#slider" ).slider();
  });
  </script>
</head>
<body>

<div id="slider"></div>


</body>
</html>