Jquery UI 변환 선택 범위 슬라이더

Question

선택 상자의 ID를 사용하고 선택을 숨기고 대신 Jquery UI 슬라이더를 표시하는 기능이 실행 중입니다. 이것은 자동으로 다른 AJAX 델리게이트 스크립트를 제출하면 같은 페이지에서 보게됩니다.

이 스크립트를 사용하여 2 개의 선택 상자에서 UI 범위 슬라이더 드로잉 정보로 변환하고 싶습니다.

줄 값을 추가하려고했습니다 : [1, 7], UI 슬라이더가 재생으로 호출되는데 두 번째 슬라이더 탭이 표시되지만 다른 선택 상자에 연결할 수 없습니다.

jQuery(document).ready(function($) { 
    $('#clarityfrom').each(function(index, el){ 
     //hide the element 
     $(el).addClass("sliderOn"); 

     //add the slider to each element 
     var slider = $('<div class="sliderHolder"><div class=\'horizontalSlider\'></div></div>').insertAfter(el).find(".horizontalSlider").slider({ 
     min: 1, 
     max: el.options.length, 
     range: 'true', 

     //I TRIED THIS AND GOT 2 TABS 
     //values: [ 1, 7], 

     value: el.selectedIndex + 1, 
     slide: function(event, ui) { 
      el.selectedIndex = ui.value - 1; 

      if(!$.browser.opera && !$.browser.msie) 
      { 
      slider.find("a").text(el.options[el.selectedIndex].label); 
      } 
      else 
      { 
      slider.find("a").text(el.options[el.selectedIndex].text); 
      } 
     }, 
     stop: function() { 
      $(el).change(); 
     } 
     }); 
     if(!$.browser.opera && !$.browser.msie) 
     { 
     slider.find("a").text(el.options[el.selectedIndex].label); 
     } 
     else 
     { 
     slider.find("a").text(el.options[el.selectedIndex].text); 
     } 

     //Create a legend under the slider so we can see the options 
     var options = []; 
     for (var option in $(el).children()) 
     { 
     if(!isNaN(parseInt(option))) 
     { 
      options.push(el.options[option].text); 
     } 
     } 
     //the width of each legend/option 
     var width = (slider.width()/(options.length - 1)); 

     //Add the legend. Half the width of the first and last options for display consistency. 
     slider.after('<div class="slider-legend"><p style="width:' + (width/2) + 'px;text-align:left;">' + options.join('</p><p style="width:' + width + 'px;">') +'</p></div>').parent().find(".slider-legend p:last-child").css("width", width/2).css("text-align", "right"); 

     //if there are too many options so that the text is wider than the width, then hide the text 
     var lastChild = slider.parent().find(".slider-legend p:last-child"); 
     if(lastChild[0].clientWidth < lastChild[0].scrollWidth) 
     { 
     slider.parent().find(".slider-legend p").css("text-indent", '200%'); 
     } 

    }); 
    }); 



<select name="clarityfrom" id="clarityfrom"> 
    <option>IF</option> 
    <option>VVS1</option> 
    <option>VVS2</option> 
    <option>VS1</option> 
    <option>VS2</option> 
    <option>SI1</option> 
    <option>SI2</option> 
    </select><Br><br> 

    <select name="clarityto" id="clarityto"> 
    <option>IF</option> 
    <option>VVS1</option> 
    <option>VVS2</option> 
    <option>VS1</option> 
    <option>VS2</option> 
    <option>SI1</option> 
    <option>SI2</option> 
    </select> 

어떤 도움이 grately 주시면 감사하겠습니다 :

Answer 1

HTML

<select name="clarityfrom" id="clarityfrom"> 
    <option value='1'>IF</option> 
    <option value='2'>VVS1</option> 
    <option value='3'>VVS2</option> 
    <option value='4'>VS1</option> 
    <option value='5'>VS2</option> 
    <option value='6'>SI1</option> 
    <option value='7'>SI2</option> 
</select> 
<select name="clarityto" id="clarityto"> 
    <option value='1'>IF</option> 
    <option value='2'>VVS1</option> 
    <option value='3'>VVS2</option> 
    <option value='4'>VS1</option> 
    <option value='5'>VS2</option> 
    <option value='6'>SI1</option> 
    <option value='7'>SI2</option> 
</select> 
<div id="slider"></div> 
<div id="clarRange"></div> 

SCRIPT

var s1 = $('#clarityfrom'); 
var s2 = $('#clarityto'); 
var slider = $('#slider').slider({ 
    min: 1, 
    max: 7, 
    values: [s1[0].selectedIndex + 1, s2[0].selectedIndex + 1], 
    slide: function (e, ui) { 
     var r1 = $('#clarityfrom option').eq(ui.values[0]-1).text(); 
     var r2 = $('#clarityto option').eq(ui.values[1]-1).text(); 
     s1.val(ui.values[0]); 
     s2.val(ui.values[1]); 
     $('#clarRange') 
      .html('Clarity range: ' + r1 + ' to ' + r2); 
    } 
}); 

현재 기능/HTML은 아래에 표시됩니다

jsFiddle DEMO