Javascript-форум - Зависимость шага 2го ползунка от позиции первого

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Зависимость шага 2го ползунка от позиции первого (https://javascript.ru/forum/jquery/62735-zavisimost-shaga-2go-polzunka-ot-pozicii-pervogo.html)

Alena-stav,
потому что на втором новая шкала и то что было выбрано на старой шкале к новой не имеет отношения.
было от 1 до 5 -- стояло 2 -- стало от 400 до 500 куда выбор ставить? незвестно, поэтому в начало, на 400, далее выбор за человеком.

Цитата:

Сообщение от рони (Сообщение 443811)

Да, но я пытаюсь сделать, чтобы ползунки были не зависимы друг от друга. И комбинация каждого из значений каждого ползунка давала определенную цену. Также как в вашем рассмотренном примере, только без зависимости ползунков и соответственно без сброса на ноль при перемещении. Только пока что не получается.

Цитата:

Сообщение от Alena-stav

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

не осилил, зачем уничтожать то для чего написан код, значит вам нужно что-то другое.

Согласна, зависимые ползунки тоже интересный вариант. Я просто спросила, потому что никак не могу понять как сделать независимые, но с общим массивом данных как в вашем коде.

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
  font-family: sans-serif;
  font-size: 12px;
}
.amount{
  font-size: 22px;
  font-weight: bold;
  border:none;
  color: #ff5555;
  background: none;
}
.slider{
   width: 300px;
   margin: 20px;
}

  </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/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
    var data = [
        [0, 10, 1],
        [0, 6, 1],
      
    ];
    function out() {
     
        var p = $(".opt .amount");
        var p1 = +p[0].value;
        var min = 1;
       
        /*  */
		
		 var y = p[1].value * 10;
       
                $(".res").html(p1 + y)
			
    }
    $(".opt").each(function(i, el) {
        var d = data[i],
            am = $(".amount", el),
            sl = $(".slider", el);
        sl.slider({
            min: d[0],
            max: d[1],
            step: d[2],
            slide: function(event, ui) {
                am.val(ui.value)
            },
            change: function(event, ui) {
                am.val(ui.value)
            },
            stop: out
        });
        sl.slider("option", "value", d[0]);
        
    });
    $('[name="xradio"]').on("click", out)
});
  </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="res">0</div>
</body>
</html>

Рони, посмотрите, в этом коде ползунки не зависимы и подсчет результата происходит по формуле. Помогите давить сюда массив данных, так же как вашем примере, чтобы без формул считался результат, а брался из массива.

Alena-stav,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Alena-stav,
ок

Alena-stav,
попробуйте описать что хотите сделать, мне пока вас сложно понять ...

Alena-stav,
общая сумма нужна или что?

Цитата:

Сообщение от рони (Сообщение 443833)

Alena-stav,
общая сумма нужна или что?

Нет, например, есть слайдер1 со списком ширины (500, 600, 700, и т.д.);
и слайдер2 со списком высоты (500, 600, 700, и т.д.);
При выборе ширины и высоты, чтобы результат цены выводил тот, который соответствует этим размерам. Этот результат не считается, он задан, например, ширина 500 и высота 600 = 2000, ширина 500 и высота 700 = 2100 и т.д.
var price = {
500: {
500: 1000,
600: 2000,
700: 2100
},
600: {
500: 2000,
600: 2050,
700: 2200
}
};

Alena-stav,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
  font-family: sans-serif;
  font-size: 12px;
}
.amount{
  font-size: 22px;
  font-weight: bold;
  border:none;
  color: #ff5555;
  background: none;
}
.slider{
   width: 300px;
   margin: 20px;
}
.radio {
display: inline;
}
.opt [type="checkbox"] + *{
   display: none;
}
.opt :checked + *{
  display:  block;
}
  </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/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
    var data = [
        [500, 600, 100],
        [500, 700, 100]
    ];
    var price = {
        500: {
            500: 1000,
            600: 2000,
            700: 2100
        },
        600: {
            500: 2000,
            600: 2050,
            700: 2200
        }
    };

    function out() {
        var p = $(".opt .amount").get();
        var width = p[0].value;
        var height = p[1].value;
        var res = price[width] && price[width][height] || "уточните цену у консультанта";
        $(".res").html(res)
    }
    $(".opt").each(function(i, el) {
        var d = data[i],
            am = $(".amount", el),
            sl =
            $(".slider", el);
        sl.slider({
            min: d[0],
            max: d[1],
            step: d[2],
            slide: function(event, ui) {
                am.val(ui.value);
                out()
            },
            change: function(event, ui) {
                am.val(ui.value);
                out()
            },
            stop: out
        });
        sl.slider("option", "value", d[0])
    })
});

  </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="res">0</div>
</body>
</html>

Спасибо, Рони. То, что нужно!

Рони, возможно прибавлять к итоговому значению процент от него? Сейчас получается прибавлять константу (2), а мне нужно при выборе checkbox прибавить например 13%.

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
  font-family: sans-serif;
  font-size: 12px;
}
.amount{
  font-size: 22px;
  font-weight: bold;
  border:none;
  color: #ff5555;
  background: none;
}
.slider{
   width: 300px;
   margin: 20px;
}
.radio {
display: inline;
}
.opt{
  margin: 30px 0;
}

.opt [type="checkbox"] + label ~ *{
   display: none;
}
.opt :checked + label ~ *{
  display:  block;
}

.opt3 [type="checkbox"] + label ~ *{
   display: none;
}
.opt3 :checked + label ~ *{
  display:  block;
}
/* Cначала обозначаем стили для IE8 и более старых версий
т.е. здесь мы немного облагораживаем стандартный чекбокс. */
.checkbox {
  vertical-align: top;
  margin: 0 3px 0 0;
  width: 17px;
  height: 17px;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают
селекторы с плюсом. Показываем, что label кликабелен. */
.checkbox + label {
  cursor: pointer;
}

/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
в них все нижеследующие стили не сработают. */

/* Прячем оригинальный чекбокс. */
.checkbox:not(checked) {
  position: absolute;
  opacity: 0;
}
.checkbox:not(checked) + label {
  position: relative; /* будем позиционировать псевдочекбокс относительно label */
  padding: 0 0 0 60px; /* оставляем слева от label место под псевдочекбокс */
}
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
.checkbox:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
.checkbox:not(checked) + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}
/* Меняем фон чекбокса, когда он включен. */
.checkbox:checked + label:before {
  background: #9FD468;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
.checkbox:checked + label:after {
  left: 26px;
}
/* Показываем получение фокуса. */
.checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}
  </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/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
    var data = [
        [500, 600, 100],
        [500, 700, 100]
    ];
    var price = {
        500: {
            500: 1000,
            600: 2000,
            700: 2100
        },
        600: {
            500: 2000,
            600: 2050,
            700: 2200
        }
    };

    function out() {
        var p = $(".opt .amount").get();
        var width = p[0].value;
        var height = p[1].value;
		var q = $('#checkbox3').is(":checked")? 2 : 0;
        var res = price[width] && price[width][height] || "уточните цену у консультанта";
		
		
        $(".res").html(res + q)
    }
    $(".opt").each(function(i, el) {
        var d = data[i],
            am = $(".amount", el),
            sl =
            $(".slider", el);
        sl.slider({
            min: d[0],
            max: d[1],
            step: d[2],
            slide: function(event, ui) {
                am.val(ui.value);
                out()
            },
            change: function(event, ui) {
                am.val(ui.value);
                out()
            },
            stop: out
        });
        sl.slider("option", "value", d[0])
    })
	
	$('#checkbox3').on("click", out);
    out()
	
});
  </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="opt3">
  <input type="checkbox" id="checkbox3" class="checkbox">
  <label for="checkbox3">Я переключаю чекбокс</label>
</div>
<div class="res" style="padding-top: 50px;">0</div>
</body>
</html>

Цитата:

Сообщение от Alena-stav

а мне нужно при выборе checkbox прибавить например 13%.

function out() {
        var p = $(".opt .amount").get();
        var width = p[0].value;
        var height = p[1].value;
    var q = $('#checkbox3').is(":checked")? 1.13 : 1;
        var res = price[width] && price[width][height] && (price[width][height]*q).toFixed(2) || "уточните цену у консультанта";
        $(".res").html(res)
    }

Спасибо большое!

<!DOCTYPE html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
  font-family: sans-serif;
  font-size: 12px;
}
.amount{
  font-size: 22px;
  font-weight: bold;
  border:none;
  color: #ff5555;
  background: none;
}
.slider{
   width: 300px;
   margin: 20px;
}
.radio {
display: inline;
}
.opt{
  margin: 30px 0;
}

.opt [type="checkbox"] + label ~ *{
   display: none;
}
.opt :checked + label ~ *{
  display:  block;
}

.opt3 [type="checkbox"] + label ~ *{
   display: none;
}
.opt3 :checked + label ~ *{
  display:  block;
}
/* Cначала обозначаем стили для IE8 и более старых версий
т.е. здесь мы немного облагораживаем стандартный чекбокс. */
.checkbox {
  vertical-align: top;
  margin: 0 3px 0 0;
  width: 17px;
  height: 17px;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают
селекторы с плюсом. Показываем, что label кликабелен. */
.checkbox + label {
  cursor: pointer;
}

/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
в них все нижеследующие стили не сработают. */

/* Прячем оригинальный чекбокс. */
.checkbox:not(checked) {
  position: absolute;
  opacity: 0;
}
.checkbox:not(checked) + label {
  position: relative; /* будем позиционировать псевдочекбокс относительно label */
  padding: 0 0 0 60px; /* оставляем слева от label место под псевдочекбокс */
}
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
.checkbox:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
.checkbox:not(checked) + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}
/* Меняем фон чекбокса, когда он включен. */
.checkbox:checked + label:before {
  background: #9FD468;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
.checkbox:checked + label:after {
  left: 26px;
}
/* Показываем получение фокуса. */
.checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}
  </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/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
    var data = [
        [500, 600, 100],
        [500, 700, 100]
    ];
    var price = {
        500: {
            500: 1000,
            600: 2000,
            700: 2100
        },
        600: {
            500: 2000,
            600: 2050,
            700: 2200
        }
    };

    function out() {
        var p = $(".opt .amount").get();
        var width = p[0].value;
        var height = p[1].value;
		var q = $('#checkbox3').is(":checked")? 2 : 0;
        var res = price[width] && price[width][height] || "уточните цену у консультанта";
		
		
        $(".res").html(res + q)
    }
    $(".opt").each(function(i, el) {
        var d = data[i],
            am = $(".amount", el),
            sl =
            $(".slider", el);
        sl.slider({
            min: d[0],
            max: d[1],
            step: d[2],
            slide: function(event, ui) {
                am.val(ui.value);
                out()
            },
            change: function(event, ui) {
                am.val(ui.value);
                out()
            },
            stop: out
        });
        sl.slider("option", "value", d[0])
    })
	
	$('#checkbox3').on("click", out);
    out()
	
});
  </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="opt3">
  <input type="checkbox" id="checkbox3" class="checkbox">
  <label for="checkbox3">Я переключаю чекбокс</label>
</div>

<input name="quantity" type="number" min="1" max='3' value="1"/> шт. <br>
<input id="okno" name="totalprice" type="text" readonly value="1000"/> руб.
	  
	  <script>
$('input[name=quantity]').on('change keyup',function(){
var q = $('input[name=quantity]').val();
var total = q*1000;
$('input[name=totalprice]').attr('value', total);
});
</script>

<div class="res" style="padding-top: 50px;">0</div>
</body>

Уважаемый, Рони. Прошу вашей помощи. Пытаюсь добавить подсчет в общую сумму инпут с изменяющимся количеством и суммой. Подскажите, я на правильном пути?

Alena-stav,
возможно вы хотели так ...

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
  font-family: sans-serif;
  font-size: 12px;
}
.amount{
  font-size: 22px;
  font-weight: bold;
  border:none;
  color: #ff5555;
  background: none;
}
.slider{
   width: 300px;
   margin: 20px;
}
.radio {
display: inline;
}
.opt{
  margin: 30px 0;
}

.opt [type="checkbox"] + label ~ *{
   display: none;
}
.opt :checked + label ~ *{
  display:  block;
}

.opt3 [type="checkbox"] + label ~ *{
   display: none;
}
.opt3 :checked + label ~ *{
  display:  block;
}
/* Cначала обозначаем стили для IE8 и более старых версий
т.е. здесь мы немного облагораживаем стандартный чекбокс. */
.checkbox {
  vertical-align: top;
  margin: 0 3px 0 0;
  width: 17px;
  height: 17px;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают
селекторы с плюсом. Показываем, что label кликабелен. */
.checkbox + label {
  cursor: pointer;
}

/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
в них все нижеследующие стили не сработают. */

/* Прячем оригинальный чекбокс. */
.checkbox:not(checked) {
  position: absolute;
  opacity: 0;
}
.checkbox:not(checked) + label {
  position: relative; /* будем позиционировать псевдочекбокс относительно label */
  padding: 0 0 0 60px; /* оставляем слева от label место под псевдочекбокс */
}
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
.checkbox:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
.checkbox:not(checked) + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}
/* Меняем фон чекбокса, когда он включен. */
.checkbox:checked + label:before {
  background: #9FD468;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
.checkbox:checked + label:after {
  left: 26px;
}
/* Показываем получение фокуса. */
.checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}
  </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/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
    var data = [
        [500, 600, 100],
        [500, 700, 100]
    ];
    var price = {
        500: {
            500: 1000,
            600: 2000,
            700: 2100
        },
        600: {
            500: 2000,
            600: 2050,
            700: 2200
        }
    };

    function out() {
        var p = $(".opt .amount").get();
        var width = p[0].value;
        var height = p[1].value;
    var q = $('#checkbox3').is(":checked")? 2 : 0;
        var res = price[width] && price[width][height] || "уточните цену у консультанта";
        var t = +$('input[name=quantity]').val()||1;
        var total = t*1000;
        $('#okno').val(total);

        $(".res").html(res + q) ;
        //$(".res").html(res + q + t)

    }
    $(".opt").each(function(i, el) {
        var d = data[i],
            am = $(".amount", el),
            sl =
            $(".slider", el);
        sl.slider({
            min: d[0],
            max: d[1],
            step: d[2],
            slide: function(event, ui) {
                am.val(ui.value);
                out()
            },
            change: function(event, ui) {
                am.val(ui.value);
                out()
            },
            stop: out
        });
        sl.slider("option", "value", d[0])
    })

  $('#checkbox3').on("click", out);
  $('input[name=quantity]').on("input", out)

    out()

});
  </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="opt3">
  <input type="checkbox" id="checkbox3" class="checkbox">
  <label for="checkbox3">Я переключаю чекбокс</label>
</div>

<input name="quantity" type="number" min="1" max='3' value="1"/> шт. <br>
<input id="okno" name="totalprice" type="text" readonly value="1000"/> руб.


<div class="res" style="padding-top: 50px;">0</div>
</body>
</html>