LuigiDH 
Niente, succede solo che la barra di scorrimento si posiziona nella posizione del 45% ma la progress bar sta sempre allo stesso punto...
In prativa l'id "progressController" viene controllato su cambiamento sul file:
<script src="js/index.js"></script>
così completo:
mentre il file index.js:codice:<!DOCTYPE html><html > <head> <meta charset="UTF-8"> <title>Circular Progress Bar</title> <link rel="stylesheet" href="css/StyleProgressBar.css"> </head> <body> <div id="page" onclick="InsLimite()"> <div class="progress-bar"> <canvas id="inactiveProgress" class="progress-inactive" height="180px" width="180px"></canvas> <canvas id="activeProgress" class="progress-active" height="180px" width="180px"></canvas> <canvas id="activeProgress2" class="progress-active2" height="180px" width="180px"></canvas> <p>0%</p> </div> <div id="progressControllerContainer"> <input type="range" id="progressController" min="0" max="100" value="15" /> <input type="range" id="progressController2" min="0" max="100" value="15" /> </div </div> <script> function InsLimite() { document.getElementById("progressController").value = 45; } </script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script> </body> </html>
codice:$(document).ready(function(){ var $pc = $('#progressController'); var $pc2 = $('#progressController2'); var $pCaption = $('.progress-bar p'); var $pCaption2 = $('.progress-bar2 p'); var iProgress = document.getElementById('inactiveProgress'); var iProgress2 = document.getElementById('inactiveProgress2'); var aProgress = document.getElementById('activeProgress'); var aProgress2 = document.getElementById('activeProgress2'); var iProgressCTX = iProgress.getContext('2d'); drawInactive(iProgressCTX); $pc.on('change', function(){ var percentage = $(this).val() / 100; console.log(percentage + '%'); drawProgress(aProgress, percentage, $pCaption); }); $pc2.on('change', function(){ var percentage = $(this).val() / 100; console.log(percentage + '%'); drawProgress2(aProgress2, percentage, $pCaption2); }); function drawInactive(iProgressCTX){ iProgressCTX.lineCap = 'square'; //outer ring iProgressCTX.beginPath(); iProgressCTX.lineWidth = 8; iProgressCTX.strokeStyle = '#e1e1e1'; iProgressCTX.arc(90,90,70,0,2*Math.PI); iProgressCTX.stroke(); //progress bar iProgressCTX.beginPath(); iProgressCTX.lineWidth = 0; iProgressCTX.fillStyle = '#e6e6e6'; iProgressCTX.arc(90,90,65,0,2*Math.PI); iProgressCTX.fill(); //progressbar caption iProgressCTX.beginPath(); iProgressCTX.lineWidth = 0; iProgressCTX.fillStyle = '#fff'; iProgressCTX.arc(90,90,55,0,2*Math.PI); iProgressCTX.fill(); } function drawProgress(bar, percentage, $pCaption){ var barCTX = bar.getContext("2d"); var quarterTurn = Math.PI / 2; var endingAngle = ((2*percentage) * Math.PI) - quarterTurn; var startingAngle = 0 - quarterTurn; bar.width = bar.width; barCTX.lineCap = 'square'; barCTX.beginPath(); barCTX.lineWidth = 10; barCTX.strokeStyle = '#76e1e5'; barCTX.arc(90,90,60,startingAngle, endingAngle); barCTX.stroke(); $pCaption.text("consumo" + (parseInt(percentage * 100, 10)) + '%'); } function drawProgress2(bar, percentage, $pCaption){ var barCTX = bar.getContext("2d"); var quarterTurn = Math.PI / 2; var endingAngle = ((2*percentage) * Math.PI) - quarterTurn; var startingAngle = 0 - quarterTurn; bar.width = bar.width; barCTX.lineCap = 'square'; barCTX.beginPath(); barCTX.lineWidth = 8; barCTX.strokeStyle = '#640000'; barCTX.arc(90,90,70,startingAngle, endingAngle); barCTX.stroke(); $pCaption.text( (parseInt(percentage * 100, 10)) + '%'); } var percentage = $pc.val() / 100; drawProgress(aProgress, percentage, $pCaption); var percentage2 = $pc2.val() / 100; drawProgress2(aProgress2, percentage2, $pCaption2); });
Non capisco il motivo!!!
