roma88,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slider demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css">
<style>
.slider { margin: 10px;width : 500px; height: 8px }
.ui-slider-handle{border-radius:50%; position: relative; font-size: 14px; display: block; }
.ui-slider-horizontal .ui-slider-handle{top:-0.3em}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<input id="text">
<div class="slider"></div>
<div id="cena2" ></div><div id="cena"></div>
<script>
$(document).ready(function () {
function price(num) {
var sum = 509,
n = 1;
for (var i = 50; i < num; i += 10) {
n ^= 1;
sum += n ? 4 : 5;
}
return [sum, (sum * .8) | 0]
}
// Указываем class блока div где будет ползунок.
$(".slider").slider({
animate: true, // Анимация ползунка
range: "min", // Фон пути ползунка, если это свойство убрать, то синей линии не будет.
value: 520, // Значение по умолчанию.
min: 50, // Минимальная сумма.
max: 1010, // Максимальная сумма.
step: 10, // Шаг диапазона.
// Вывод диапазона
slide: function (event, ui) {
$('#text').val(ui.value);
var value = price(ui.value);
$("#cena2").text(value[0]*47.3995|0);
$("#cena").text(value[1]*47.3995|0);
},
// Вывод диапазона в поле input
change: function (event, ui) {
$('#text').val(ui.value);
var value = price(ui.value);
$("#cena2").text(value[0]*47.3995|0);
$("#cena").text(value[1]*47.3995|0);
}
})
$(".slider").slider("value", 520);
});
</script>
</body>
</html>