Javascript-форум - Показать сообщение отдельно

рони · #4 (**permalink**) 27.07.2016, 19:58

няу,
вариант ...

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Бегунок</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
    div.range
    {width: 300px;
        height: 0px;
        padding: 7px;
        background: #c0c0c0;
        box-shadow: inset 0 0 6px;
        border-radius: 6px;
        }
</style>
<script type="text/javascript">
jQuery(function() {
    var
        resultXv = jQuery("#itogXv span"),
        itogXv = 0,
        zv=50,
        zn=50,
        xn=50;


        function recount() {
        itogXv = (zv*zn)/xn;
        resultXv.html(itogXv);
    };

    $(document).on("change keyup", "#amountZv", function() {
        zv = +$(this).val();
        $("#sliderZv").slider("value", zv);
        recount();
    });

    $(document).on("change keyup", "#amountZn", function() {
        zn = +$(this).val();
        $("#sliderZn").slider("value", zn);
        recount();
    });


    $(document).on("change keyup", "#amountXn", function() {
        xn = +$(this).val();
        $("#sliderXn").slider("value", xn);
        recount();
    });


    $("#sliderZv").slider({
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function(event, ui) {
            $('#amountZv').val(ui.value).trigger("change");
        }
    });
    $("#amountZv").val($("#sliderZv").slider("value"));

    $("#sliderZn").slider({
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function(event, ui) {
            $('#amountZn').val(ui.value).trigger("change");
         },
        change : function(event, ui) {
        $('#amountZn').val(ui.value).trigger("change");
      }
    });
    $("#amountZn").val($("#sliderZn").slider("value"));

    $("#sliderXn").slider({
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function(event, ui) {
            $('#amountXn').val(ui.value).trigger("change");

        },
       stop:function(event, ui) {
            var val = $("#sliderZn").slider("value");
            val > ui.value && (val = ui.value);
            $("#sliderZn").slider("option", {"max"  :  ui.value, "value" : val})
}

    });
    $("#amountXn").val($("#sliderXn").slider("value"));
});

</script>

</head>

<body>
<p>
  <label for="amount">Требуемое общее количество жидкости:</label>
  <input type="text" id="amountZv" readonly style="border:0; font-weight:bold;">
  <div id="sliderZv" class="range"></div>
</p>
<p>
  <label for="amount">Крепость в базовой жидкости:</label>
  <input type="text" id="amountXn" readonly style="border:0; font-weight:bold;">
  <div id="sliderXn" class="range"></div>
</p>
<p>
  <label for="amount">Желаемая крепость на выходе:</label>
  <input type="text" id="amountZn" readonly style="border:0; font-weight:bold;">
  <div id="sliderZn" class="range"></div>
</p>

    <table>
        <tr><th>Компонент</th><th>Мл</th></tr>
        <tr><td>Базовая жидкость</td><td id="itogXv"><span>0</span></td></tr>

    </table>
        </body>
        </html>