ufaclub,
<!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.4/themes/start/jquery-ui.css">
<style>.slider { margin: 10px; } </style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div class="rang" id="interval1">1</div>
<div class="rang" id="interval2">2</div>
<div class="rang" id="interval3">3</div>
<input id="slider-result" name="">
<div class="slider"></div>
<script>
var rang = [[1000,5000,1],[5000,10000,2],[0,1000,3]];
function toggle(value)
{
$.each(rang,function(indx, el){
var show = value >= el[0] && value < el[1] ? "show" : "hide"
$("#interval"+el[2])[show]()});
}
$( ".slider" ).slider({
animate: true,
range: "min",
value: 1000,
min: 100,
max: 10000,
step: 10,
//Получаем значение и выводим его на странице
slide: function( event, ui ) {
$( "#slider-result" ).val( ui.value );
// $( "#slider-result" ).val($("#tema").val(ui.value));
toggle(+ui.value)
},
//Обновляем скрытое поле формы, так что можно передать данные с помощью формы
change: function(event, ui) {
$('#hidden').val( ui.value );
$( "#slider-result" ).val( ui.value );
toggle(+ui.value)
}
});
$( ".slider" ).slider("option","value", 1000)
</script>
</body>
</html>
