Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.07.2016, 17:58
Новичок на форуме
Отправить личное сообщение для няу Посмотреть профиль Найти все сообщения от няу
 
Регистрация: 27.07.2016
Сообщений: 3

Зависимый слайдер
Подскажите, пожалуйста, как задать третьему слайдеру зависимость от второго. Надо сделать так, чтобы бегунок на третьем слайдере останавливался при достижении значения, установленного на втором слайдере.
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();
    });

    });

$(function() {
    $("#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"));
});

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



$(function() {
    $("#sliderXn").slider({
        range: "min",
        value: 50,
        min: 0,
        max: 100,
    
        slide: function(event, ui) {
            $('#amountXn').val(ui.value).trigger("change");
        }
    });
    $("#amountXn").val($("#sliderXn").slider("value"));
});
Ответить с цитированием
  #2 (permalink)  
Старый 27.07.2016, 18:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

няу,
сделайте полный макет c css и html
Ответить с цитированием
  #3 (permalink)  
Старый 27.07.2016, 18:57
Новичок на форуме
Отправить личное сообщение для няу Посмотреть профиль Найти все сообщения от няу
 
Регистрация: 27.07.2016
Сообщений: 3

<!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();
    });

    });

$(function() {
    $("#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"));
});

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

$(function() {
    $("#sliderXn").slider({
        range: "min",
        value: 50,
        min: 0,
        max: 100,
    
        slide: function(event, ui) {
            $('#amountXn').val(ui.value).trigger("change");
        }
    });
    $("#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>
Ответить с цитированием
  #4 (permalink)  
Старый 27.07.2016, 19:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

няу,
вариант ...
<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 27.07.2016, 20:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ограничение диапазона ui slider
няу,
или так
<!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) {
            var val = $("#sliderXn").slider("value");
            if(ui.value > val) return false;
            $('#amountZn').val(ui.value).trigger("change");
         },
        change : function(event, ui) {
        var val = $("sliderXn").slider("value");
            if(ui.value > val) return false;
            $('#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("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>
Ответить с цитированием
  #6 (permalink)  
Старый 28.07.2016, 04:54
Новичок на форуме
Отправить личное сообщение для няу Посмотреть профиль Найти все сообщения от няу
 
Регистрация: 27.07.2016
Сообщений: 3

Огромное спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Новостной слайдер на bxslider malsyst Библиотеки/Тулкиты/Фреймворки 3 02.09.2013 10:32
Слайдер во время загрузки страницы v.v.dankiv jQuery 0 14.04.2013 11:16
Слайдер с помощью CSS и jQuery - 1000 р. stixia007 jQuery 21 27.03.2013 22:44
jquery слайдер, анимация при переключении вкладки KiTaeZa Events/DOM/Window 1 05.09.2011 20:52
Нужно отредактировать слайдер glavkot Работа 0 22.08.2011 14:14