If you need to create a Slider with two Handlers for posting an interval where min_value must be less then max_value and you want the interface to respect this rule:
AVERAGE DAY RATE
<input id="r_value_min" name="r_value_min" readonly="readonly" size="5" style="display:none;" type="text" value="0" />
<input id="r_value_max" name="r_value_max" readonly="readonly" size="5" style="display:none;" type="text" value="5000" />
BETWEEN
<span id="rate_value_min" class="invisible">0</span> AND
<span id="rate_value_max" class="invisible">5000</span> USD
<br>
<div id="rate_slider" class="slider">
<div class="handler_min"></div>
<div class="handler_max"></div>
</div>
<br>
<script type="text/javascript">
(function() {
min = new Control.Slider($('rate_slider').down('.handler_min'), $('rate_slider'), {
range: $R(0, 4999),
sliderValue: 0,
onSlide: function(value) {
if (value < $('r_value_max').value) {
$('r_value_min').value = value.toFixed();
$('rate_value_min').innerHTML = value.toFixed();
} else {
$('r_value_min').value = value.toFixed();
$('rate_value_min').innerHTML = value.toFixed();
$('r_value_max').value = (value+1).toFixed();
$('rate_value_max').innerHTML = (value+1).toFixed();
max.setValue((value+1).toFixed());
}
}
});
max = new Control.Slider($('rate_slider').down('.handler_max'), $('rate_slider'), {
range: $R(1, 5000),
sliderValue: 5000,
onSlide: function(value) {
if (value > $('r_value_min').value) {
$('r_value_max').value = value.toFixed();
$('rate_value_max').innerHTML = value.toFixed();
} else {
$('r_value_max').value = value.toFixed();
$('rate_value_max').innerHTML = value.toFixed();
$('r_value_min').value = (value-1).toFixed();
$('rate_value_min').innerHTML = (value-1).toFixed();
min.setValue((value+1).toFixed());
}
}
});
})();
</script>
</div>
</div>
In this implementation the min_slider pushes up the max_slider when the interval is reduced to 0 and viceversa. I decided not to show text fields, but labes for better formatting..
Happy Sliding! =)
