Jquery UI将选择转换为范围滑块

我已经启动并运行了一个函数，它获取选择框的ID，隐藏选择并显示Jquery UI滑块。这非常有效，因为它在同一页面上触发了auto submit my other AJAX委托脚本

我想把这个脚本，并转换成一个用户界面范围滑块绘图信息从2个选择框

我已经尝试添加行值：[1,7]，当UI滑块被调用时，会显示第二个滑块选项卡，但我无法将其连接到不同的选择框

当前函数/HTML显示如下：

  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>

任何帮助都将不胜感激：

HTML

---

UI范围滑块从两个选择框中绘制信息，其中第一个选择框是最小值，第二个选择框是最大值？是的，我们的想法是从范围滑块的两端开始有两个具有相同值1的选择框。然后，这将自动更新选择框，该框有望触发该选择上的onchange函数，并将表单提交给ajax处理程序？您放弃了这个问题吗？

<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>

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