RENOTES

Использование jQuery UI Slider значительно упрощает заполнение и восприятие пользовательских форм производящих какие-либо расчеты, т.к. удобнее передвинуть ползунок на нужную позицию, чем заполнять поля x=2333, y=3444, z=4555 и т.д.

Также используются в онлайн-микшерах, выборах диапазона значений (например, от 100 до 1000 руб.). Ознакомиться с различными вариациями слайдера можно на jQuery UI.

Рассмотрим простой пример умножения значений двух слайдеров.

HTML:

<form>
	<label class="control-label">Цена:</label>
	<input type="text" id="money" style="border: 0;box-shadow: none; width: 35px;">
	<div id="money-slider" style="width:500px;">
   		<a  href="#"></a>
	</div>
	<label class="control-label">Количество:</label>
	<input type="text" id="all" style="border: 0;box-shadow: none; width: 35px;">
	<div id="all-slider" style="width:500px;">
		<a  href="#"></a>
	</div>
	Итого: <input value="0" name="budget" id="budget" readonly="readonly" maxlength="10" size="5" type="text">
</form>

JS:

$("#budget").val("0");

function call() {
    var all = $("#all").val();
    var money = $("#money").val();
    $("#budget").val(Number(all) * Number(money));
}

$("#all-slider").slider({
    range: "min",
    min: 0,
    max: 100,
    value: 0,
    slide: function (event, ui) {
        $("#all").val(ui.value);
        call();
    }
});
$("#all").val($("#all-slider").slider("value"));

$("#money-slider").slider({
    range: "min",
    min: 0,
    max: 100,
    value: 0,
    slide: function (event, ui) {
        $("#money").val(ui.value);
        call();
    }
});
$("#money").val($("#money-slider").slider("value"));

Исходники тут.