<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>
<!-- ana container -->
<div class="container text-center">
<hr align="center" width="50%">
<!-- Salary Inputs -->
<div class="row mt-3">
<div class="col-6 border-right" style="border-right:2px solid #ccc;">
<label>
<strong style="color:#003131">
<span id="sol1"></span> Genel Kurul Sonrası Aylık Maaşınızı giriniz
</strong>
</label>
<input id="alan1" type="text"
class="form-control font-weight-bold form-control-lg"
style="border:1px solid #2E7415"
placeholder='7,00'>
</div>
<div class="col-6">
<label>
<strong style="color:#6F0D89">
<span id="sol2"></span> Genel Kurul Sonrası Aylık Maaşınızı giriniz
</strong>
</label>
<input id="alan2" type="text"
class="form-control font-weight-bold form-control-lg"
style="border:1px solid #A208C9;"
placeholder='8,00'>
</div>
</div>
<!-- Results -->
<div class="row mt-4">
<div class="col-6 col-sm-6 col-md-6 col-lg-6">
<div class="alert alert-warning text-left" role="alert"
style="margin-right:0; padding:0; border: 1px solid #4F2808; background-color:#FAF5E5;">
<h6 class="mb-1 mt-2 mb-2 ml-3" style="color:#4F2808;font-size:12px">Yeni Aylık Maaşınız</h6>
<h5 id="ucAylik" class="font-weight-bold mb-2 ml-3" style="color:#4F2808;font-size:15px">₺ 99.888.230,00</h5>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6">
<div class="alert alert-danger text-left" role="alert" style="margin-right:0; padding:0; border: 1px solid #4F2808; background-color:#4F2808;font-size:15px;">
<h6 class="mb-1 mt-2 mb-2 ml-3" style="color:#FFF8E0;font-size:12px">Yeni Rezerviniz</h6>
<h5 id="rezerv" class="font-weight-bold mb-2 ml-3" style="color:#FFF8E0;font-size:15px">₺ 99.888.230,00</h5>
</div>
</div>
</div>
<!-- PROGRESS BAR -->
<div class="progress mt-3 mb-4 modern-progress">
<div id="progressBar"
class="progress-bar modern-bar"
role="progressbar"
style="width:2%"
aria-valuemin="0"
aria-valuemax="100">
<span id="progressText">2%</span>
</div>
</div>
<!-- Slider Section -->
<div class="slider-value mb-4">% <span id="valBox" class=""></span></div>
<!-- Başlık -->
<label class="font-weight-bold float-left">
Maaş Oran Tercihi %
<span id="valBox1">1</span>
<small class="text-dark">(Düğmeyi kaydırın)</small>
</label>
<!-- SLIDER -->
<input type="range"
id="MaasTercih"
class="custom-range mt-3"
min="1"
max="50"
value="1">
<!-- Alt Bilgi -->
<div class="d-flex justify-content-between font-weight-bold mt-2">
<span>% 1</span>
<div>% <span id="valBox2"></span></div>
</div>
<!-- Button -->
<button id="birAylikButon" type="button" class="btn btn-calc btn-block mt-5">
Hesapla
</button>
</div>
/* Progress genel görünüm */
.modern-progress {
height: 28px;
border-radius: 50px;
background: #e9ecef;
overflow: hidden;
}
/* Gradient Bar */
.modern-bar {
height: 100%;
border-radius: 3px;
background: linear-gradient(45deg, #FAF5E5, #984D3E);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: #000;
transition: width 0.6s cubic-bezier(.4,0,.2,1);
}
/* Slider modern görünüm */
.custom-range {
width: 100%;
display: block;
}
.custom-range::-moz-range-thumb {
background: #007bff;
}
.progress { background-color: #5A2A00;height: 23px; /* açık gri yerine farklı bir renk */ }
.progress-bar { background-color: #FAF5E5; /* açık gri yerine farklı bir renk */ }
.top-bar{
background:#b51616;
color:#fff;
font-weight:bold;
padding:10px 15px;
font-size:18px;
}
.card-custom{
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}
.progress {
border: 1px solid #4F2808; /* Turuncu kenarlık */
border-radius: 4px; /* Köşeleri yuvarlatmak için */
}
$(document).ready(function() {
$("#MaasTercih").on("input change", function(){
var value = $(this).val();
var percent = value * 2; // 50 max → 100%
// Progress bar genişliği
$("#progressBar").css("width", percent + "%");
// İç yüzde yazısı
$("#progressText").text(percent + "%");
// Üstteki oran değeri
$("#valBox, #valBox1, #valBox2 ").text(value);
});
});
