Bonjour,
J'ai un code jquery range qui me fait un calcul. Dans ce code je souhaite afficher un valeur sur un range.
Depuis 10 jours je casse la tête mais j'ai pas trouvé la solution.
Pouvez-vous m'aider svp?
http://cjoint.com/14sp/DIApkKnzx6k.htm
Voici le code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simulateur</title>
<link rel="stylesheet" href="http://cjoint.com/14sp/DIxsfqvFNSf_jquery-ui.css">
<link rel="stylesheet" href="http://cjoint.com/14sp/DIxsfdaCqbX_bootstrap.min.css">
<link rel="stylesheet" href="http://cjoint.com/14sp/DIxseMjLq3z_styles.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.min.js"></script>
<style type="text/css">
* {
font-family: Verdana, Geneva, sans-serif;
font-size: 15px;
}
p {
margin-bottom: 1px;
margin-top: 1px;
text-align: right
}
</style>
</head>
<body>
<div class="container">
<form class="form-horizontal form-pricing" role="form">
<table width="100%" height="auto" cellspacing="0" cellpadding="0" style="border: 4px solid #dc291a;">
<tr>
<td> </td>
</tr>
<tr>
<td style="height:100px"><div class="col-sm-12">
<div id="slider"></div>
</div></td>
</tr>
<tr>
<td style="height:50px"></td>
</tr>
<tr>
<td style="height:100px"><div class="col-sm-12">
<div id="slider2"></div>
</div></td>
</tr>
<tr>
<td style="height:30px"><hr/></td>
</tr>
<tr>
<td style="height:30px"><p style="text-align:left; margin-left:20px"> Limite Exo : </p>
<p id="LimSeuilExo-label" style="text-align:left; margin-left:20px"> </p></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3%"> </td>
<td width="35%" style="font-size:18px; color: red; font-weight:600">Avantages Entreprise</td>
<td width="10%"> </td>
<td width="1%"> </td>
<td width="2%" bgcolor="#505050"> </td>
<td width="1%"> </td>
<td width="35%" style="font-size:18px; color: red; font-weight:600">Avantages pour votre Salarié </td>
<td width="10%"> </td>
<td width="3%"> </td>
</tr>
<tr>
<td width="3%"> </td>
<td width="35%">Budget entreprise </td>
<td width="10%"><p id="BudgetEntreprise-label"> </p></td>
<td width="1%"> </td>
<td width="2%" bgcolor="#505050"> </td>
<td width="1%"> </td>
<td width="35%">Pouvoir d'achat exonérée de charges </td>
<td width="10%"><p id="BudgetSalarie-label"> </p></td>
<td width="3%"> </td>
</tr>
<tr>
<td width="3%"> </td>
<td width="35%">Montant soumis à charges </td>
<td width="10%"><p id="ChargesEntreprise-label"> </p></td>
<td width="1%"> </td>
<td width="2%" bgcolor="#505050"> </td>
<td width="1%"> </td>
<td width="35%">Montant soumis à charges </td>
<td width="10%"><p id="ChargesSalarie-label"> </p></td>
<td width="3%"> </td>
</tr>
<tr>
<td width="3%"> </td>
<td width="35%">Estimation charges patronales </td>
<td width="10%"><p id="EstimationEntreprise-label"> </p></td>
<td width="1%"> </td>
<td width="2%" bgcolor="#505050"> </td>
<td width="1%"> </td>
<td width="35%">Estimation charges salariales </td>
<td width="10%"><p id="EstimationSalariales-label"> </p></td>
<td width="3%"> </td>
</tr>
<tr>
<td width="3%"> </td>
<td width="35%">Economies Réalisées </td>
<td width="10%"><p id="EconomieEntreprise-label"> </p></td>
<td width="1%"> </td>
<td width="2%" bgcolor="#505050"> </td>
<td width="1%"> </td>
<td width="35%">Economies Réalisées </td>
<td width="10%"><p id="EconomieSalarie-label"> </p></td>
<td width="3%"> </td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<script>
$(document).ready(function() {
$("#slider").slider({
animate: true,
value:50,
min: 50,
max: 60,
step: 1.0,
slide: function(event, ui) {
update(Taux,ui.value);
serialization: {
} } });
$("#slider2").slider({
animate: true,
value:7,
min: 3,
max: 12,
step:0.01,
slide: function(event, ui) {
update(VF,ui.value);
}
});
$("#VF").val(7);
$("#Taux").val(50);
$("#NbSalarie").val(1);
$("#NbTicket").val(20);
$("#SeuilExo").val(5.33);
$("#LimSeuilExo").val(10.66);
$("#DiffPartEntSeul").val(0);
$("#ParticipationEntreprise").val(3.5);
$("#ChargesEntreprise").val(0);
$("#EstimationEntreprise").val(0);
$("#EconomieEntreprise").val(385);
$("#VF-label").text(7);
$("#Taux-label").text(50);
$("#NbSalarie-label").text(1);
$("#NbTicket-label").text(20);
$("#SeuilExo-label").text(5.33);
$("#LimSeuilExo-label").text(10.66);
$("#DiffPartEntSeul-label").text(0);
$("#ParticipationEntreprise-label").text(3.5);
$("#ChargesEntreprise-label").text(0);
$("#EstimationEntreprise-label").text(0);
$("#EconomieEntreprise-label").text(385);
update();
});
function update(slider,val) {
var $VF = slider == VF?val:$("#VF").val();
var $Taux = slider == Taux?val:$("#Taux").val();
var $NbSalarie = slider == NbSalarie?val:$("#NbSalarie").val();
var $NbTicket = slider == NbTicket?val:$("#NbTicket").val();
var $SeuilExo = slider == SeuilExo?val:$("#SeuilExo").val();
var $LimSeuilExo = slider == LimSeuilExo?val:$("#LimSeuilExo").val();
var $DiffPartEntSeul = slider == DiffPartEntSeul?val:$("#DiffPartEntSeul").val();
var $ParticipationEntreprise = slider == ParticipationEntreprise?val:$("#ParticipationEntreprise").val();
var $ChargesEntreprise = slider == ChargesEntreprise?val:$("#ChargesEntreprise").val();
var $EstimationEntreprise = slider == EstimationEntreprise?val:$("#EstimationEntreprise").val();
var $EconomieEntreprise = slider == EconomieEntreprise?val:$("#EconomieEntreprise").val();
// Seuil Exo //
$SeuilExo = 5.33;
// Limite Exonaration //
$LimSeuilExo = (($SeuilExo * 100 ) / $Taux).toFixed(2) ;
// Participation de l'Entreprise //
$ParticipationEntreprise = (($VF * $Taux ) / 100).toFixed(10) ;
//Difference entre Participation Entreprise et Seuil Exo //
$DiffPartEntSeul = ($ParticipationEntreprise - $SeuilExo).toFixed(10);
// Budget Entreprise //
$BudgetEntreprise = ((11 * $NbSalarie * $NbTicket * $VF * $Taux) / 100).toFixed(2) ;
// Montant soumis à charges Entreprise //
$ChargesEntreprise = ($DiffPartEntSeul * 11 * $NbSalarie * $NbTicket).toFixed(2);
if($DiffPartEntSeul < 0)
{
$ChargesEntreprise = 0;
}
// Estimation charges patronales //
$EstimationEntreprise = ($ChargesEntreprise * 0.5).toFixed(2) ;
if($EstimationEntreprise < 0)
{
$EstimationEntreprise = 0;
}
// Economies Réalisées Entreprise //
if($ParticipationEntreprise > $SeuilExo)
{
$EconomieEntreprise = (((5 * 2 * $SeuilExo * $NbSalarie * $NbTicket * $Taux * 11) /1000 ) - ($EstimationEntreprise)).toFixed(2);
}
if($ParticipationEntreprise < $SeuilExo)
{
$EconomieEntreprise = (0.5 * $BudgetEntreprise ).toFixed(2);
}
// Pouvoir d'achat exonérée de chargese //
if($ParticipationEntreprise <= $SeuilExo)
{
$BudgetSalarie = ((11 * $NbSalarie * $NbTicket * $VF * $Taux) / 100).toFixed(2) ;
}
if($ParticipationEntreprise > $SeuilExo)
{
$BudgetSalarie = ((2 * 11 * $SeuilExo * $NbTicket * $Taux) / 100).toFixed(2) ;
}
// Montant soumis à charges Salarie //
$ChargesSalarie = ($DiffPartEntSeul * 11 * $NbTicket).toFixed(2);
if($DiffPartEntSeul < 0)
{
$ChargesSalarie = 0;
}
// Estimation charges salariales //
$EstimationSalariales = ($ChargesSalarie * 0.2).toFixed(2) ;
if($EstimationSalariales < 0)
{
$EstimationSalariales = 0;
}
// Economies Réalisées Salarie //
if($ParticipationEntreprise > $SeuilExo)
{
$EconomieSalarie = ((0.2 * $BudgetSalarie) - ($EstimationSalariales)).toFixed(2);
}
if($ParticipationEntreprise < $SeuilExo)
{
$EconomieSalarie = (0.2 * $BudgetSalarie).toFixed(2);
}
$( "#VF" ).val($VF);
$( "#VF-label" ).text($VF);
$( "#Taux" ).val($Taux);
$( "#Taux-label" ).text($Taux);
$( "#DiffPartEntSeul" ).val($DiffPartEntSeul);
$( "#DiffPartEntSeul-label" ).text($DiffPartEntSeul);
$( "#NbSalarie" ).val($NbSalarie);
$( "#NbSalarie-label" ).text($NbSalarie);
$( "#NbTicket" ).val($NbTicket);
$( "#NbTicket-label" ).text($NbTicket);
$( "#BudgetEntreprise" ).val($BudgetEntreprise);
$( "#BudgetEntreprise-label" ).text($BudgetEntreprise);
$( "#SeuilExo" ).val($SeuilExo);
$( "#SeuilExo-label" ).text($SeuilExo);
$( "#LimSeuilExo" ).val($LimSeuilExo);
$( "#LimSeuilExo-label" ).text($LimSeuilExo);
$( "#ParticipationEntreprise" ).val($ParticipationEntreprise);
$( "#ParticipationEntreprise-label" ).text($ParticipationEntreprise);
$( "#ChargesEntreprise" ).val($ChargesEntreprise);
$( "#ChargesEntreprise-label" ).text($ChargesEntreprise);
$( "#EstimationEntreprise" ).val($EstimationEntreprise);
$( "#EstimationEntreprise-label" ).text($EstimationEntreprise);
$( "#EconomieEntreprise" ).val($EconomieEntreprise);
$( "#EconomieEntreprise-label" ).text($EconomieEntreprise);
$( "#BudgetSalarie" ).val($BudgetSalarie);
$( "#BudgetSalarie-label" ).text($BudgetSalarie);
$( "#ChargesSalarie" ).val($ChargesSalarie);
$( "#ChargesSalarie-label" ).text($ChargesSalarie);
$( "#EstimationSalariales" ).val($EstimationSalariales);
$( "#EstimationSalariales-label" ).text($EstimationSalariales);
$( "#EconomieSalarie" ).val($EconomieSalarie);
$( "#EconomieSalarie-label" ).text($EconomieSalarie);
$('#slider a').html('<label> '+$Taux+' </label>');
$('#slider2 a').html('<label> '+$VF+' </label>');
}
</script>
</form>
<input type="hidden" id="Taux" >
<input type="hidden" id="VF" >
<input type="hidden" id="DiffPartEntSeul" >
<input type="hidden" id="NbSalarie" >
<input type="hidden" id="NbTicket" >
<input type="hidden" id="SeuilExo" >
<input type="hidden" id="LimSeuilExo" >
<input type="hidden" id="BudgetEntreprise" >
<input type="hidden" id="ParticipationEntreprise" >
<input type="hidden" id="ChargesEntreprise" >
<input type="hidden" id="EstimationEntreprise" >
<input type="hidden" id="EconomieEntreprise" >
<input type="hidden" id="BudgetSalarie" >
<input type="hidden" id="ChargesSalarie" >
<input type="hidden" id="EstimationSalariales" >
<input type="hidden" id="EconomieSalarie" >
</div>
</body>
</html>
---------------------------
Tout va bien se passer :)