Подскажите пожалуйста как реализовать кальлятор с ипользованием Ion.RaneSlider - - грубо говоря переделать такой скрипт http://jsfiddle.net/22u4orc0/17/
jQuery(function() {
var tarif = 6,
result_outptut = jQuery("#revenue span"),
client = 24,
revenue = 0,
check = 4000,
time = 3;
function recount() {
revenue = (client + check + time) * tarif;
result_outptut.html(revenue + ' руб/мес');
};
jQuery('#tarif').change(function() {
tarif = jQuery('#tarif option:selected').val();
recount();
});
$(document).on("change keyup", "#amount", function() {
client = +$(this).val();
$("#slider-range-min").slider("value", client);
recount();
});
$(document).on("change keyup", "#amount2", function() {
check = +$(this).val();
$("#slider-range-min2").slider("value", check);
recount();
});
$(document).on("change keyup", "#amount3", function() {
time = +$(this).val();
$("#slider-range-min3").slider("value", time);
recount();
});
});
$(function() {
$("#slider-range-min").slider({
range: "min",
value: 24,
min: 1,
max: 700,
slide: function(event, ui) {
$('#amount').val(ui.value).trigger("change");
}
});
$("#amount").val($("#slider-range-min").slider("value"));
});
$(function() {
$("#slider-range-min2").slider({
range: "min",
value: 4000,
min: 1000,
max: 40000,
slide: function(event, ui) {
$("#amount2").val(ui.value).trigger("change");
}
});
$("#amount2").val($("#slider-range-min2").slider("value"));
});
$(function() {
$("#slider-range-min3").slider({
range: "min",
value: 3,
min: 1,
max: 10,
slide: function(event, ui) {
$("#amount3").val(ui.value).trigger("change");
}
});
$("#amount3").val($("#slider-range-min3").slider("value"));
});
только вместо Ui Slider использовать RangeSlider
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calculator">
<div id="choise_tarif">
<p>Выберите тариф</p>
<p>
<select id="tarif">
<option value='6'>Базовый</option>
<option value='1'>Профессиональный</option>
<option value='2'>Корпоративный</option>
</select>
</p>
</div>
<p>
<label for="amount">Клиентов в месяц:</label>
<input type="text" id="amount" readonly style="border:0; font-weight:bold;">
</p>
<div id="slider-range-min"></div>
<p>
<label for="amount">К выплате:</label>
<input type="text" id="amount2" readonly style="border:0; font-weight:bold;">
</p>
<div id="slider-range-min2"></div>
<p>
<label for="amount">Тело кредита:</label>
<input type="text" id="amount3" readonly style="border:0; font-weight:bold;">
</p>
<div id="slider-range-min3"></div>
<p id="revenue">Комиссия: <strong><span>1256</span></strong>
</p>
</div>
</div>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Есть готовые решения для реализации простого ящика с открытием крышки на canvas? Пример