Привет всем! Уже 4 дня мучаюсь с проблемой, как передать результат с одного слайдера на второй.
Плагин качал тут
ionden.com/a/plugins/ion.rangeSlider/en.html
Есть такой шаблон
<div class="rande_input">
<h3>Бюджет</h3>
<input type="text" id="mysql" class="slider-kit" value=""/>
<!--<input type="text" class="js-range-slider-1" value="" />-->
<h3>Клиентов</h3>
<input type="text" id="disk" class="slider-kit" value=""/>
<!-- <input type="text" class="js-range-slider-2" value="" />-->
<div id="monthly-calc">0 руб.</div>
<div id="monthly-cal">0 клиентов</div>
</div>
JS функция калькулятора
function calculate() {
var disk = $('#disk').val() * 6.20;
var db = $('#mysql').val() / 6.20;
var monthly = (disk);
var monthl = (db);
$('#calculate-result').html('');
$('#monthly-calc').text(monthly.toFixed(1) + ' руб.');
$('#monthly-cal').text(monthl.toFixed(2) + ' клиентов');
}
$("#mysql").ionRangeSlider({
type: "single",
hide_min_max: true,
step: 6.2,
min: 620,
max: 10000,
from:0,
postfix:" руб.",
onChange: function (data) {
s1.update({
from: data.from
});
s2.update({
from: data.from
});
},
onUpdate:calculate
});
$("#disk").ionRangeSlider({
type: "single",
hide_min_max: true,
step: 0,
min: 100,
max:10000,
from:0,
postfix:" клиентов",
onChange: function (data) {
s2.update({
from: data.from
});
s1.update({
from: data.from
});
},
onUpdate:calculate
});
s1 = $("#mysql").data("ionRangeSlider");
s2 = $("#disk").data("ionRangeSlider");
calculate()
});
})(jQuery);
Суть проблемы, нужно результат Клиентов передать в ползунок.
И проблема что он сильно тормозит, когда одновременно работают ползунки слайда. Вот как он работает
jsfiddle.net/Timwer/0w2smb8g/3 Где ошибка?
Ошибку с тормозами решил:
код такой
(function($) {
$(function(){
var s1 = $(".s1"), s2 = $(".s2"), $range = $(".range"), $result = $(".result"), $sum = $(".sum");
function calculate() {
var disk = $('#disk').val() * 6.20;
var db = $('#mysql').val() / 6.20;
var monthly = (disk);
var monthl = (db);
$('#calculate-result').html('');
$('#monthly-calc').text(monthly.toFixed(1) + ' руб.');
$('#monthly-cal').text(monthl.toFixed(2) + ' клиентов');
}
$("#mysql").ionRangeSlider({
type: "single",
hide_min_max: true,
step: 6.2,
min: 620,
max: 10000,
from:0,
postfix:" руб.",
onChange: function (data) {
s2.update({
from: data.from
});
},
onUpdate:calculate
});
$("#disk").ionRangeSlider({
type: "single",
hide_min_max: true,
step: 0,
min: 100,
max:10000,
from:0,
postfix:" клиентов",
onChange: function (data) {
s1.update({
from: data.from
});
},
onUpdate:calculate
});
s1 = $("#mysql").data("ionRangeSlider");
s2 = $("#disk").data("ionRangeSlider");
calculate()
});
})(jQuery);
