JQuery SelectToUISlider Issues

Question

이전에 슬라이더 질문으로 요청한 적이 없지만 이미 질문을 탐색 할 때 대답을 찾을 수 없었기를 바랍니다. 그럼, 여기 간다 : 나는 SelectToUISlider (http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/) 기본적으로 수정 된 JQuery UI 슬라이더가 있고 범위 값을 사용하고있다. 그래서 저는 60에서 한 핸들을 시작하고 100에서 다른 핸들을 시작합니다 (0에서 100까지의 스케일). 원하는 것은 라디오 버튼을 클릭하여 100을 0으로 변경하고 100으로 변경할 수있게하는 것입니다. JQuery 선택기/javascript를 통해 변경하는 데 실패했습니다. 그러나 핸들을 이동하기 위해 선택을 변경하면이 방법이 작동하지만 두 번째 핸들 (100)이 첫 번째 핸들 (60)에서 0으로 이동하면 범위가 따르지 않는 것으로 나타납니다. 나는 슬라이더를 파괴해야하고이 시나리오에서 0에서 첫 번째 핸들이되는 두 번째 핸들 (100으로 시작 함)로 다시 빌드해야한다고 생각합니다 (파괴하려고 시도했지만 응답하지 않는 것 같습니다. 그것은 지금처럼 라디오 버튼을 클릭하면 아무 일도 발생하지

<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 

,하지만 나는 또한 어떤 자바 스크립트 오류를받지 못했습니다 :. 그 중 하나) 여기에 지금까지 작동하지 않는 시도했다입니다. 이 작업이 끝나면 슬라이더 속성을 변경하여 핸들 중 하나를 비활성화하는 방법을 찾고 싶습니다. 즉 핸들을 그곳에 두지 만 드래그 할 수는 없습니다. 어떤 도움이라도 대단히 감사합니다.

Answer 1

업데이트 :

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 
    }); 
    } 
} 

이 작동하지만, 아주 아주 느린 : 나는 다음에 내 event_occurs 기능을 변경했습니다. 만약 내가 슬라이더를 파괴하지 않고 이것을 할 수 있다면 명백한 플러스가 될 것입니다. 어떤 도움도 여전히 감사하겠습니다.

Answer 2

$ ('ui-slider')를 사용하지 않는 이유는 무엇입니까? DOM에서 제거한 다음 다시 초기화하십시오. 나는이 길을 갔고 그것은 매우 빨리 달린다.