Использовать данные slider.ui для расчетов

[the_little]

$( "#slider2" ).slider("option", "value", 24)

я кстати полез смотреть примеры этих слайдеров, нашел похожий на мой, с кодом примерно таким, как нужно, на сколько я понимаю.

Он подойдет для моих целей? Он получается еще короче. Он правда был под инпут, я его переписал под свой обычный див.

$( function() {
    $( "#slider2" ).slider({
      range: "min",
      value: 24,
      min: 1,
      max: 80,
      slide: function( event, ui ) 
      {
        $( "#contentSlider2" ).html( ui.value );
      }
    });
    	$( "#contentSlider2" ).html( $( "#slider2" ).slider( "value" ) );
});

[рони]

Он подойдет для моих целей?

вам решать

[the_little]

Если смотреть вариант, который я собрал под вашим руководством получается так. Переменную новую объявил, вывел, работает. Я сначала подумал что не работает, а он подцепляет значение когда ползунок отпускаешь. Пока кнопка мышки зажата - не подцепляет.

$(document).ready(function(){
    $( "#slider2" ).slider(
    {
	range: "min",
	value : 24,
	min : 1,
	max : 80,
	step : 1,
	slide: function( event, ui ) 
    	{
		$( "#contentSlider2" ).html( ui.value );
        },
    	        change: function( event, ui ) 
    	{
		$( "#contentSlider2" ).html( ui.value );
		
                srok = $( "#contentSlider2" ).html();
			calc_srok = parseInt(srok, 10);
			document.getElementById('calc-summ').innerHTML = calc_srok;

        }
    });
    $( "#slider2" ).slider("option", "value", 24);
});

СПАСИБО!
Сейчас проделаю то же самое со вторым слайдером и потом попробую где-то над двумя переменными поработать.

[рони]

а он подцепляет значение когда ползунок отпускаешь. Пока кнопка мышки зажата - не подцепляет.

в slide и в change одно и тоже

[the_little]

Создал переменные. привёл их к нужному виду.
Одни переменные задаются в первом слайдере.
Другие задаются во втором слайдере.
По отдельности работают как надо.

Но когда я их складываю, например во втором слайдере, то:
- при прокрутке второго слайдера все правильно работает.
- при прокрутке первого слайдера сумма двух переменных не меняется. При изменении положения второго слайдера - работает правильно.

Если я пытаюсь арифметические действия производить вне снайперов - то не работает...

Вот полный код скрипта в настоящий момент.

$(document).ready(function(){
	$( "#slider" ).slider({
		range: "min",
		value : 50000000,
		min : 100000,
		max : 100000000,
		step : 100000,
		slide: function( event, ui ) 
		{
			$( "#contentSlider" ).html(addSpaces(ui.value.toString()));
		},
		change: function( event, ui ) 
		{
			$( "#contentSlider" ).html(addSpaces(ui.value.toString()));
			
			summ = $( "#contentSlider" ).html();
			free_summ = summ.replace(/[^-0-9]/gim,'');
			calc_summ = free_summ / 1000000;
			document.getElementById('calc-market').innerHTML = calc_summ;
		}
	});
	$( "#slider" ).slider("option", "value", 50000000);
});

function addSpaces(nStr)
{
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ' ' + '$2');
	}
	return x1 + x2;
}

$(document).ready(function(){
	$( "#slider2" ).slider(
	{
		range: "min",
		value : 24,
		min : 1,
		max : 80,
		step : 1,
		slide: function( event, ui ) 
		{
			$( "#contentSlider2" ).html( ui.value );
		},
		change: function( event, ui ) 
		{
			$( "#contentSlider2" ).html( ui.value );
			
			srok = $( "#contentSlider2" ).html();
			free_srok = parseInt(srok, 10);
			
			garant_summ = calc_summ + free_srok;
			document.getElementById('calc-summ').innerHTML = garant_summ;
		}
	});
	$( "#slider2" ).slider("option", "value", 24);
});

[рони]

the_little,
html покажите

[the_little]

the_little,
html покажите

<div class="landing-raschet-left-block">
	<h2>Рассчитайте стоимость прямо сейчас</h2>
	<div class="landing-raschet-summa">
		<div class="landing-raschet-summa-text">Сумма гарантии</div>
		<div class="landing-raschet-summa-number">
			<div id="contentSlider" class="landing-raschet-summa-number-summ"></div>
			<div class="landing-raschet-summa-number-curr">₽</div>
		</div>
	</div>
	<div class="grade1">
		<div id="slider"></div>
	</div>
	<div class="landing-raschet-srok">
		<div class="landing-raschet-srok-text">Срок гарантии</div>
		<div class="landing-raschet-srok-number">
			<div id="contentSlider2" class="landing-raschet-srok-number-summ"></div>
			<div class="landing-raschet-srok-number-curr">месяцев</div>
		</div>
	</div>
	<div class="grade2">
		<div id="slider2"></div>
	</div>
</div>

[рони]

the_little,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </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 arr = [0, 0];

    function fn() {
        $("#contentSlider").html(addSpaces(arr[0]));
        $("#contentSlider2").html(arr[1]);
        $("#calc-summ").html(arr[0] / 1E6 + arr[1])
    }
    $("#slider").slider({
        range: "min",
        value: 5E7,
        min: 1E5,
        max: 1E8,
        step: 1E5,
        slide: function(event, ui) {
            arr[0] = +ui.value;
            fn()
        },
        change: function(event, ui) {
            arr[0] = +ui.value;
            fn()
        }
    });
    $("#slider").slider("option", "value", 5E7);

    function addSpaces(nStr) {
        nStr += "";
        x = nStr.split(".");
        x1 = x[0];
        x2 = x.length > 1 ? "." + x[1] : "";
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) x1 = x1.replace(rgx,
            "$1" + " " + "$2");
        return x1 + x2
    }
    $("#slider2").slider({
        range: "min",
        value: 24,
        min: 1,
        max: 80,
        step: 1,
        slide: function(event, ui) {
            arr[1] = +ui.value;
            fn()
        },
        change: function(event, ui) {
            arr[1] = +ui.value;
            fn()
        }
    });
    $("#slider2").slider("option", "value", 24)
});
  </script>
</head>

<body>
<div class="landing-raschet-left-block">
  <h2>Рассчитайте стоимость прямо сейчас</h2>
  <div class="landing-raschet-summa">
    <div class="landing-raschet-summa-text">Сумма гарантии</div>
    <div class="landing-raschet-summa-number">
      <div id="contentSlider" class="landing-raschet-summa-number-summ  slider-range"></div>
      <div class="landing-raschet-summa-number-curr">₽</div>
    </div>
  </div>
  <div class="grade1">
    <div id="slider"></div>
  </div>
  <div class="landing-raschet-srok">
    <div class="landing-raschet-srok-text">Срок гарантии</div>
    <div class="landing-raschet-srok-number">
      <div id="contentSlider2" class="landing-raschet-srok-number-summ slider-range"></div>
      <div class="landing-raschet-srok-number-curr">месяцев</div>
    </div>
  </div>
  <div class="grade2">
    <div id="slider2"></div>
  </div>
</div>

<div id="calc-summ"></div>
</body>
</html>

[the_little]

Ну что я могу сказать - профессионал!

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

Спасибо!

[the_little]

В целом все понял.
А вот это

fn()

что делает? Отправляет значение в функцию fn()?

Я немного добавил арифметики, и еще пару элементов в массив.
Считает все правильно, но при загрузке страницы, пока ползунок не подвигаешь - ничего не выводит. Подвигаешь - все правильно считает.

$(function() {
    var arr = [0, 0, 0, 0];

    function fn() {
        $("#contentSlider").html(addSpaces(arr[0]));
        $("#contentSlider2").html(arr[1]);
        $("#calc-summ").html(addSpaces(arr[2]));
        $("#calc-market").html(addSpaces(arr[2] * 1.2));

        if (arr[0] <= 1000000 && arr[1] <= 12)
		{
			arr[2] = 3000;
		}
		else 
		{
			arr[2] = arr[0] * arr[1] / 12 * 1.5 / 100;
		}
    }
    $("#slider").slider({
        range: "min",
        value: 5E7,
        min: 1E5,
        max: 1E8,
        step: 1E5,
        slide: function(event, ui) {
            arr[0] = +ui.value;
            fn()
        },
        change: function(event, ui) {
            arr[0] = +ui.value;
            fn()
        }
    });
    $("#slider").slider("option", "value", 5E7);

    function addSpaces(nStr) {
        nStr += "";
        x = nStr.split(".");
        x1 = x[0];
        x2 = x.length > 1 ? "." + x[1] : "";
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) x1 = x1.replace(rgx,
            "$1" + " " + "$2");
        return x1 + x2
    }
    $("#slider2").slider({
        range: "min",
        value: 24,
        min: 1,
        max: 80,
        step: 1,
        slide: function(event, ui) {
            arr[1] = +ui.value;
            fn()
        },
        change: function(event, ui) {
            arr[1] = +ui.value;
            fn()
        }
    });
    $("#slider2").slider("option", "value", 24)
});