JQuery SelectToUISlider Issues
- by David Savage
Hopefully this hasn't been asked before as just a slider question, but I couldn't find an answer when already browsing questions. So, here goes: I have a SelectToUISlider (http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/) which is basically a modified JQuery UI Slider, and I'm using a range value. So, I start with one handle at 60, and another at 100 (scale from 0 to 100). What I want to do is click a radio button so that the 100 changes to a 0, and be able to change back to 100. I have been unsuccessful at changing it via JQuery selectors/javascript. However, when changing the selects to move the handles, this works, but the range appears not to follow if the second handle (at 100) moves to 0 behind the first handle (at 60). I'm thinking I might have to destroy the slider and rebuild it with the second handle (that starts as 100) become the first handle at 0 in this scenario (although I've tried destroying it and it doesn't seem to respond to that either.) Here's what I've tried so far that doesn't work:
<script type="text/javascript">
{literal}
$(function(){
$('select').selectToUISlider({
labels: 10
});
});
function event_occurs(does) {
if (does == 1) {
$('.ui-slider').slider('option', 'values', [60,100]);
}
else {
$('.ui-slider').slider('option', 'values', [0,60]);
}
}
</script>
<style type="text/css">
form {font-size: 62.5%; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; }
fieldset { border:0; margin: 1em; height: 12em;}
label {font-weight: normal; float: left; margin-right: .5em; font-size: 1.1em;}
select {margin-right: 1em; float: left;}
.ui-slider {clear: both; top: 5em;}
.ui-slider-tooltip {white-space: nowrap;}
</style>
{/literal}
<form action="#">
<fieldset>
<select name="valueA" id="my_estimate">
{section name="estimates" loop=101}
<option value="{$smarty.section.estimates.index}"{if $smarty.section.estimates.index == 60} selected{/if}>{$smarty.section.estimates.index}</option>
{/section}
</select>
<select name="valueB" id="payout">
{section name="estimates" loop=101}
<option value="{$smarty.section.estimates.index}"{if $smarty.section.estimates.index == 100} selected{/if}>{$smarty.section.estimates.index}</option>
{/section}
</select>
</fieldset>
</form>
<input type="radio" onclick="event_occurs(1)" name="Event" checked="checked"> Event Occurs<br />
<input type="radio" onclick="event_occurs(0)" name="Event"> Event Does Not Occur
As it is now, nothing happens when clicking the radio buttons, but I'm also not getting any Javascript errors. After I get this working, I would also like to find some way to disable one of the handles through changing the slider property. Ie leave the handle where its at but not allow it to be dragged. Any help is greatly appreciated.
