JQuery SelectToUISlider Issues

Question

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.

Answer 1

Update: I changed my event_occurs function to the following:

    function event_occurs(does) {
  if (does == 1) {
    $('.ui-slider-scale').hide();
    $('.ui-slider').slider('destroy');
    $('#payout option:eq(100)').attr("selected","selected");
    $('select').selectToUISlider({
      labels: 10
    });
  }
  else {
    $('.ui-slider-scale').hide();
    $('.ui-slider').slider('destroy');
    $('#payout option:eq(0)').attr("selected","selected");
    $('#payout, #my_estimate').selectToUISlider({
      labels: 10
    });
  }
}

This works, but is very very slow. If I could do this without having to destroy the slider would be an obvious plus. Any help is still appreciated.

Answer 2

Why don't you just use $('ui-slider').remove(). Remove it from the DOM and then re-initialize it. I've done this way and it runs very fast.

Answer 3

Get or set the value option for SelectToUISlider???