Jquery UI Convert Select's to Range Slider

Question

I already have a function up and running which takes the ID of a select box, hides the select and displays a Jquery UI slider instead. This works great as it fires the auto submit my other AJAX delegate script looks after on the same page.

I want to take this script and convert it into a UI Range Slider drawing info from 2 select boxes.

I have tried to add the line values: [ 1, 7 ], where the UI slider is called into play, this does display a second slider tab but I cannot connect it to a differant select box.

Current Function/ HTML is displayed below:

  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>

Any help would be grately appreciated:

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

jsFiddle DEMO