Форум

Клавер · #11 (**permalink**) 11.08.2016, 17:37

Есть 4 бегунка, оформил их так, но теперь не могу понять, как установить связь. Общая сумма всех 4х слайдеров не должна превышать 100 %, т.е. значения могут быть любые, больше-меньше не важно, главное чтоб в сумме всегда оставалось 100. Код сырой, там еще расчеты будут с использованием значений слайдеров.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slider</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css">
  <style>
  #slider0, #slider1, #slider2, #slider3 { margin: 10px; width: 300px; }
    </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>

<script>
jQuery(function() {
$("#slider0").slider({
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function(event, ui) {
            $('#amount0').val(ui.value).trigger("change");
        }
    });
    $("#amount0").val($("#slider0").slider("value"));

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

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

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

</script>

</script>

<body>

<input id="amount0">
<div id="slider0"></div>
<input id="amount1">
<div id="slider1"></div>
<input id="amount2">
<div id="slider2"></div>
<input id="amount3">
<div id="slider3"></div>
</body>

рони · #12 (**permalink**) 11.08.2016, 18:52

Клавер,
код применим для любого количества ползунков и общей суммы.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider{
  width: 300px;
  margin: 10px;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/south-street/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
    var arr = [25, 25, 25, 25],
        k = 0;
    $(".opt").each(function(i, el) {
        var d = arr[i],
            am = $(".amount", el),
            sl = $(".slider", el);
        sl.slider({
            min: 0,
            max: 100,
            step: 1,
            slide: function(event, ui) {
                am.val(ui.value);
                var n = arr[i] - ui.value;
                arr[i] = +ui.value;
                for (var a = Math.abs(n); a; k = ++k % arr.length) {
                    if (k != i && arr[k] < 100 && n > 0) {
                        arr[k] += 1;
                        a--
                    }
                    if (k != i && arr[k] > 0 && n < 0) {
                        arr[k] -= 1;
                        a--
                    }
                }
                arr.forEach(function(d, j) {
                    if (j != i) $(".slider").eq(j).slider("option", "value", d)
                })
            },
            change: function(event, ui) {
                am.val(ui.value)
            }
        });
        sl.slider("option", "value", d)
    })
});
  </script>
</head>

<body>
<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>
<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>
<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>
<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>
</body>
</html>

Клавер · #13 (**permalink**) 12.08.2016, 15:33

Спасибо, очень помогли

makcim_tol · #14 (**permalink**) 26.02.2018, 14:22

рони, помоги.

хочу использовать Ion.RangeSlider, но может есть что то более подходящее ко мне.

есть три слайдера с диапазонами(двумя ползунками):
1. 30, 40, 50, 60, 70, 80, 90, 100
2. 1, 2, 3, 4
3. 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16

как сделать зависимости? например:
если выбран диапазон в первом слайдере с 30 по 60, то во втором автоматически выбирается диапазон с 1 по 2. А если выбрать во втором значения с 2 по 3, то в первом измениться на с 40 по 90.

рони · #15 (**permalink**) 26.02.2018, 15:35

makcim_tol,
не понимаю логики

makcim_tol · #16 (**permalink**) 27.02.2018, 00:43

Есть параметры квартиры: площадь(1), кол-во комнат(2), этаж(3).

Т.е. если выбрать площадь от 30 до 60, то это могут быть либо однокомнатные либо двухкомнатные.
Ну а если выбрать например кол-во комнат с 2 по 4, то площадь соответственно уже будет от 50 до 100.
А если выбрать только кол-во комнат 3. то площадь выберется от 60 до 90.

Надеюсь понятнее объяснил.

makcim_tol · #17 (**permalink**) 27.02.2018, 00:49

Если выбрано кол-во комнат 3 и площадь квартир от 60 до 90, то ни что не должно мешать пользователю изменить площадь на от 80 до 90.
Но если пользователь изменить например на от 80 до 100, то и кол-во комнат измениться на с 3 по 4.

рони · #18 (**permalink**) 27.02.2018, 01:58

makcim_tol,
не предсталяю как это можно сделать, не могу помочь.

j0hnik · #19 (**permalink**) 27.02.2018, 13:05

а что if уже отменили?

рони · #20 (**permalink**) 27.02.2018, 13:17

j0hnik,

Форум

Справочник

Discord чат

Курсы javascript