Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
​
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    
    <script src="http://code.jquery.com/jquery-1.9.1.js"    type="text/javascript"></script>
​
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"    type="text/javascript"></script>
​
    <script>
        $(document).ready(function () {
​
            $(function () {
                $("#slider1").slider({
                    range: "min",
                    value: 36,
                    min: 12,
                    max: 36,
                    slide: function (event, ui) {
                        $(".amount1").val(ui.value);
                        writesum();
                    }
                });
                $(".amount1").val($("#slider1").slider("value"));
            });
​
            $(function () {
                $("#slider2").slider({
                    range: "min",
                    value: 50000,
                    min: 1,
                    max: 50000,
                    slide: function (event, ui) {
                        $(".amount2").val(ui.value);
                        writesum();
                    }
                });
                $(".amount2").val($("#slider2").slider("value"));
            });
​
​
            function writesum() {
                var months = $('.amount1').val();
                var credits = $('.amount2').val();
                var payment = parseFloat(Number(credits) / Number(months))
                var rounded = payment.toFixed(2);
                $('.amount3').val(rounded);
            }
​
​
​
        });
​
​
​
    </script>
​
​
    <style>
​
    .ui-slider { position: relative; text-align: left; background: yellow; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; -webkit-box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.5); box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.5)}
​
​
.ui-slider .ui-slider-handle { outline-color: transparent; background: blue; position: absolute; top: -8px; left: -8px; z-index: 2;  border-radius: 70px;  width: 30px; height:30px; cursor: pointer; }
​
​
.ui-slider .ui-slider-range { -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; -webkit-box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.5); box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.5)width: 100px; background: yellow; position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
​
​
.amount1
{
    width: 15px;
    color: blue;
    font-weight: bold;
    border: none;
}
.amount2
{
    width: 35px;
    color: blue;
    font-weight: bold;
    border: none;
}
.amount3
{
    margin-left: 10px;
    color: blue;
    font-weight: bold;
    width: 150px;
    border: none;
}
.container
{
    width: 150px;
    height: 50px;
    margin-left: 100px;
}
​
.sonuccontainer
{
    float: left;
    width: 400px;
    height: 50px;
}
.bilgilendirme
{
    margin-top: 4px;
    float: left;
}
​
</style>
​
</head>
<body>
​
    <input type="text" class="amount1" />
​
<div class="container">
    <div id="slider1"></div>
</div>
​
<input type="text" class="amount2" />
​
<div class="container">
    <div id="slider2"></div>
</div>
​
<div class="sonuccontainer">
    <div class="bilgilendirme">aylık ödeme miktarınız</div>
    <input type="text" class="amount3" />
</div>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers