<!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/south-street/jquery-ui.css">
<style>
body{
background: #FFCC00
}
#time_slider, #amount_slider{
margin:45px;
width:500px;
height:12px;
background-image:-webkit-gradient(linear,left,right,color-stop(0,#00FF7F),color-stop(1,#008000));
background-image:-ms-linear-gradient(left,#00FF7F,#008000);
background-image:-o-linear-gradient(left,#00FF7F,#008000);
background-image:-moz-linear-gradient(left,#00FF7F,#008000);
background-image:-webkit-linear-gradient(left,#00FF7F,#008000);
background-image:linear-gradient(to right,#00FF7F,#008000);
border:#000000 1px solid;
}
#time_slider{
margin-top: 100px;
}
#show, #sh{
position:relative;
width:60px;
height:30px;
top:5px;
left:5px;
display:block;
float:left;
text-shadow: 2px 1px 0px #00CC33;
color:#008505;
font-size: 24px;
}
.car:before{
content:"";
background:no-repeat url(http://www.livegif.ru/Gallery/TECHNIKS/CARS/1T2.GIF);
width:60px;
height:45px;
display:inline-block;
position:relative;
top:-5px;
left:5px;
}
.house:before{
content:"";
background:no-repeat url(http://www.livegif.ru/Gallery/DOM/buildings/HOUSE13.GIF);
width:45px;
height:45px;
display:inline-block;
position:relative;
top:-25px;
left:12px;
}
.money:before{
content:"";
background:no-repeat url(http://www.livegif.ru/Gallery/OTHERS/MONEY/DOLLAR4.GIF);
width:28px;
height:45px;
display:inline-block;
position:relative;
top:-17px;
left:21px;
}
.time:before{
content:"";
background:no-repeat url(http://www.livegif.ru/Gallery/DOM/CLOCKS/30R3.GIF);
width:35px;
height:45px;
display:inline-block;
position:relative;
top:-38px;
left:30px;
}
.ui-slider-handle{
font-size:14px;
padding:2px 12px 5px 5px;
box-shadow:0 0 1px rgba(0,0,0,0.3),0 3px 7px rgba(0,0,0,0.3),inset 0 1px rgba(255,255,255,1),inset 0 -3px 2px rgba(0,0,0,0.25);
border-radius:5px;
background:-ms-linear-gradient(#eeefef,#ffffff 10%);
background:-o-linear-gradient(#eeefef,#ffffff 10%);
background:-moz-linear-gradient(#eeefef,#ffffff 10%);
background:-webkit-linear-gradient(#eeefef,#ffffff 10%);
background:linear-gradient(#eeefef,#ffffff 10%);
text-align:center;
text-decoration:none;
}
.ui-slider-horizontal .ui-slider-handle{
top:-7px;
}
h3{
display: inline-block;
text-align: center;
text-shadow: 2px 1px 0px #00CC33;
color:#008505;
}
#amount{
text-shadow: 2px 1px 0px #00CC33;
color:#008505;
font-size: 24px;
width: 80px;
}
</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>
<select id="my_select" name="my_select">
<option value="12">Авто</option>
<option value="10">Недвижимость</option>
<option value="15">Экспресс</option>
</select>
<h3>10000 - 50000</h3>
<div id="show" class="car">10000</div>
<div id="amount_slider"></div>
<input type="text" name="amount" id="amount">
<div id="sh" class="time">1</div>
<div id="time_slider"></div>
<script>
$("#amount_slider").slider(
{
range: false,
min: 10000,
max: 50000,
value: 15000,
step: 1000,
change: function(event, ui) {
var offset = $(ui.handle).offset();
$("#show").html(ui.value).offset({top: offset.top-20, left: offset.left-18})
$("#amount").val(ui.value);
},
slide: function(event, ui) {
var offset = $(ui.handle).offset();
$("#show").html(ui.value).offset({top: offset.top-20, left: offset.left-18});
$("#amount").val(ui.value);
}
}
);
$("#amount_slider").slider("option", "value", 10000);
$("#my_select").change(function ()
{
var min =[10000, 60000, 20000][this.selectedIndex],
max =[50000, 100000, 30000][this.selectedIndex],
cls =["car", "house", "money"][this.selectedIndex];
$("#amount_slider").slider("option", "max", max);
$("#amount_slider").slider("option", "min", min);
$("#amount_slider").slider("option", "value", min);
$("#show").removeClass().addClass(cls);
$("h3").text(min + " - " + max);
}
)
$("#time_slider").slider(
{
range: false,
min: 0,
max: 60,
value: 12,
step: 6,
change: function(event, ui) {
var offset = $(ui.handle).offset();
$("#sh").html(ui.value).offset({top: offset.top, left: offset.left-28})},
slide: function(event, ui) {
var offset = $(ui.handle).offset();
$("#sh").html(ui.value).offset({top: offset.top, left: offset.left-28})}
}
);
$("#time_slider").slider("option", "value", 12);
$("#amount").on("input", function () { //или "change" вместо "input"
var min = $("#amount_slider").slider("option", "min"),
max = $("#amount_slider").slider("option", "max"),
val = +this.value;
if(val >= min && val <= max)$("#amount_slider").slider("value", val);
});
</script>
</body>
</html>
