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:

`UI Range Slider drawing info from 2 select boxes` Where the first select is the "min" and the second select is the "max"? — DevlshOne, Aug 13 '13 at 02:23
Yes, the idea is to have 2 select boxes with the same values 1 starting at either end of the range slider. This should then auto update the select box which hopefully should trigger the "onchange" function on that select and submit the form to the ajax handler? — Dan Smith, Aug 13 '13 at 08:26

DevlshOne · Answer 1 · 2013-11-21T17:03:17.403

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

Jquery UI Convert Select's to Range Slider

1 Answers1