slider range draggable help
Can anyone repond on this and tell me what i am missing
I've made the slider range draggable along it's "X" axis but how can i
make it so when you drag the slider range left or right it also moves
the slider handles?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="css/sliderStyle.css" type="text/css"
media="screen" title="Flora (Default)">
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="js/selector.js"></script>
<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/fx.js"></script>
<script type="text/javascript" src="js/offset.js"></script>
<script type="text/javascript" src="js/ui.base.js"></script>
<script type="text/javascript" src="js/ui.slider.js"></script>
<script type="text/javascript" src="js/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui.draggable.ext.js"></script>
<script>
if(!window.console) {
window.console = {
log: function() {
//alert(arguments[0]);
}
}
}
$(window).bind("load",function(){
$("#slider").slider({
handles: [{ start:10, id:"#handle1"}, {start:60, id:"#handle2"}],
minValue: 1,
maxValue: 100,
steps: 90,
stepping: 1,
range: true,
change: function(e,ui) {
console.log(ui.range);
$("#information").text(Math.round(ui.range)*10);
$("#information2").text(ui.value);
}
});
$("#minTime").draggable({
axis: 'x',
containment: '.ui-slider-range',
snapMode: 'inner'
});
$("#timeWindow").draggable({
axis: 'x',
containment: '#slider'
});
});
</script>
</head>
<body>
<div id="slider" class="ui-slider-1" style="">
<div id="handle1" class="ui-slider-handle"></div>
<div id="minTime" style="background-image:url('images/flightBG.png');
background-repeat:repeat-x; width:100px; height:12px; left:140px; z-
index:2; top:20px; text-align:center; position:relative;"><img
src="images/grabBar.jpg" style="position:relative; top:-5px" alt=""></
div>
<div id="handle2" class="ui-slider-handle"></div>
</div>
Slider Range from one slider to the next:
<div id="information" style="width: 400px; font-weight:bold;"></div>
Last moved slider position:
<div id="information2" style="width: 400px; font-weight:bold;"></div>
min flight time:
<div id="information3" style="width: 400px; font-weight:bold;"></div>
</body>
</html>