JSFiddle - React, Tailwind, and code Playground

by Nex_Otaku

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<p>
    <label for="amount_stamina">Выносливость:</label>
    <input type="text" id="amount_stamina" readonly />
    <div id="slider_stamina"></div>
</p>
<p>
    <label for="amount_golod">Голод:</label>
    <input type="text" id="amount_golod" readonly />
    <div id="slider_golod"></div>
</p>
<p>
    <label for="amount_sport">Спорт:</label>
    <input type="text" id="amount_sport" readonly />
    <div id="slider_sport"></div>
</p>

JavaScript

function recalcStamina() {
    var golod = parseInt($("#amount_golod").val());
    var sport = parseInt($("#amount_sport").val());
    var stamina = ((golod + sport)*golod*sport)/(100*100);
    $("#amount_stamina").val(stamina);
    $("#slider_stamina").slider("value", stamina);
}

$(function () {
// Выносливость
$("#slider_stamina").slider({
	min: 1,
	max: 200,
	value: 50,
    slide: function(event, ui) { return false; }
});
$("#amount_stamina").val($("#slider_stamina").slider("value"));

// Голод
$("#slider_golod").slider({
	min: 1,
	max: 100,
	value: 50,
	slide: function(event, ui) {
		$("#amount_golod").val(ui.value);
        recalcStamina();
	}
});
$("#amount_golod").val($("#slider_golod").slider("value"));

// Спорт
$("#slider_sport").slider({
	min: 1,
	max: 100,
	value: 50,
	slide: function(event, ui) {
		$("#amount_sport").val(ui.value);
        recalcStamina();
	}
});
$("#amount_sport").val($("#slider_sport").slider("value"));
recalcStamina();
});