asked on

Jquery ui slider problem.

Hello experts.
I have a solution (https://www.experts-exchange.com/questions/24784648/Jquery-range-slider-from-select-boxes.html) with two select sliders.
The problem i have is when select1 has not exactly the same values with select2.
In my example below select1 starts with:
<option value="">All</option>
<option value="0" >0</option> ...and ends
<option value="300000" >300000</option>

The second select starts:
<option value="">All</option>
<option value="5000" >5000</option> and ends
<option value="9999999">More than 300000 Km</option>

When i move to the right the second slider (on page load the two sliders are one below the other and both values are "All") the first value i see is 0 and not 500.On the right the slider is getting the max value 300000 and not "More than 300000 Km".It seems that it gets the values from the first select.
But if i let the second slider on the right and reload the page ,it is getting the right value "More than 300000 Km".

Any help?
Notice that i need the values in the selects exactly like they are.
files to the example below can be downloaded from here:
http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/development-bundle/ui/ui.slider.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/slider/selectToUISlider.jQuery.js"></script>
<link type="text/css" rel="stylesheet" href="js/ui/development-bundle/themes/ui-lightness/ui.all.css"  />
<link type="text/css" rel="Stylesheet" href="js/ui/slider/ui.slider.extras.css"  />
<style type="text/css">
/*slider */

	.ui-slider {clear: both;}
	/* end */
	</style>
    <script type="text/javascript">
		$(function(){
  $('select#S_Kilometervon, select#S_Kilometerbis').selectToUISlider({
    labels: 0,
    tooltip: false,
	sliderOptions: {
    stop: function() {doSearch();}
  }
  });
    $('div.sliderval').each(function(i, el){// this will populate 2 divs with inital values based on selects' values
    $(el).html($('#' + el.id.split('val_')[1] + ' option:selected').text());

  });
});
	</script>
</head>

<body>
<table width="300px">
<tr>
 <td  class="tdnewsearch" colspan="2">
<form name="Form" id="Form" action="slidertest.cfm" method="post">
<fieldset>
          <select name="S_Kilometervon"  id="S_Kilometervon"  style="display:none" >

                     <option value="">All</option>
            
                     <option value="0" >0</option>
                  
                     <option value="5000" >5000</option>
                  
                     <option value="10000" >10000</option>

                  
                     <option value="15000" >15000</option>
                  
                     <option value="20000" >20000</option>
                  
                     <option value="30000" >30000</option>
                  
                     <option value="40000" >40000</option>
                  
                     <option value="50000" >50000</option>
                  
                     <option value="60000" >60000</option>

                  
                     <option value="70000" >70000</option>
                  
                     <option value="80000" >80000</option>
                  
                     <option value="90000" >90000</option>
                  
                     <option value="100000" >100000</option>
                  
                     <option value="120000" >120000</option>
                  
                     <option value="140000" >140000</option>

                  
                     <option value="160000" >160000</option>
                  
                     <option value="180000" >180000</option>
                  
                     <option value="200000" >200000</option>
                  
                     <option value="250000" >250000</option>
                  
                     <option value="300000" >300000</option>
                  
                  </select>

         <select name="S_Kilometerbis" id="S_Kilometerbis"  style="display:none" >

                   <option value="">All</option>
             
                   <option value="5000" >5000</option>
                  
                   <option value="10000" >10000</option>
                  
                   <option value="15000" >15000</option>

                  
                   <option value="20000" >20000</option>
                  
                   <option value="30000" >30000</option>
                  
                   <option value="40000" >40000</option>
                  
                   <option value="50000" >50000</option>
                  
                   <option value="60000" >60000</option>
                  
                   <option value="70000" >70000</option>

                  
                   <option value="80000" >80000</option>
                  
                   <option value="90000" >90000</option>
                  
                   <option value="100000" >100000</option>
                  
                   <option value="120000" >120000</option>
                  
                   <option value="140000" >140000</option>
                  
                   <option value="160000" >160000</option>

                  
                   <option value="180000" >180000</option>
                  
                   <option value="200000" >200000</option>
                  
                   <option value="250000" >250000</option>
                  
                   <option value="300000" >300000</option>
                  
                   <option value="9999999">More than 300000 Km</option>
                  
                  </select>

                </fieldset>
                </form>

              </td>
        </tr>
        <tr>
      <td colspan="2">
      <div style="overflow:auto;">
      <div id="val_S_Kilometervon" class="sliderval" style="float:left; width:50%; text-align:left;">&nbsp;</div>

      <div id="val_S_Kilometerbis" class="sliderval" style="float:right; width:50%; text-align:right;">&nbsp;</div>
      </div>
      </td>
</tr>
</table>

</body>
</html>

Open in new window

Terry_focus

Hi,

I think I have solved your problem, try the page below. The only bit I am confused about is what you want to do with the results, but I hope all is clear

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/development-bundle/ui/ui.slider.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/slider/selectToUISlider.jQuery.js"></script>
<link type="text/css" rel="stylesheet" href="js/ui/development-bundle/themes/ui-lightness/ui.all.css"  />
<link type="text/css" rel="Stylesheet" href="js/ui/slider/ui.slider.extras.css"  />
<style type="text/css">
/*slider */
    .ui-slider {clear: both;}
    /* end */
    </style>
<script type="text/javascript">
$(function(){
  //Fire up your plugin, more efficent to drop the select
  $('#S_Kilometervon, #S_Kilometerbis').selectToUISlider({
	    labels: 0,
	    tooltip: false,
	    sliderOptions: {
			/*
			 * Stop function, e is the event, the slider holds the data about the sliders after they have changed
			 * slider = {
			 * 	 handle:a tag (dom element) that just moved
			 * 	 value:that new changed values
			 * 	 values:(similar name!) holds an array of all current values of both sliders after the change
			 * }
			 */
	    	stop: function(e,slider) {
				//Prep our results pane
				var $out = $("#result").html("");
				//Take the HTML of the option markeds as selected by the slider
				$out.append("<p>Slider 1 = "+$("#S_Kilometervon option").eq(slider.values[0]).html()+"</p>");
				//Same here			
				$out.append("<p>Slider 2 = "+$("#S_Kilometerbis option").eq(slider.values[1]).html()+"</p>");
				//Get the value as a number
				var firstSlider = parseInt($("#S_Kilometervon option").eq(slider.values[0]).html(),10)||0;			
				var secondSlider = parseInt($("#S_Kilometerbis option").eq(slider.values[1]).html(),10)||0;
				//Append the difference
				$out.append("<p>Difference = "+(secondSlider-firstSlider)+"</p>");		
			}
	  	}
	});
	//Not sure what this is for?
	$('div.sliderval').each(function(i, el){// this will populate 2 divs with inital values based on selects' values
		$(el).html($('#' + el.id.split('val_')[1] + ' option:selected').text());
  	});
});
        </script>
</head>

<body>
<table width="300px">
<tr>
 <td  class="tdnewsearch" colspan="2">
<form name="Form" id="Form" action="slidertest.cfm" method="post">
<fieldset>
          <select name="S_Kilometervon"  id="S_Kilometervon"  style="display:none" >
                     <option value="">All</option>       
                     <option value="0" >0</option>                  
                     <option value="5000" >5000</option>                  
                     <option value="10000" >10000</option>
                     <option value="15000" >15000</option>                  
                     <option value="20000" >20000</option>                  
                     <option value="30000" >30000</option>                  
                     <option value="40000" >40000</option>                  
                     <option value="50000" >50000</option>                  
                     <option value="60000" >60000</option>
                     <option value="70000" >70000</option>                  
                     <option value="80000" >80000</option>                  
                     <option value="90000" >90000</option>                  
                     <option value="100000" >100000</option>                  
                     <option value="120000" >120000</option>                  
                     <option value="140000" >140000</option>
                     <option value="160000" >160000</option>                  
                     <option value="180000" >180000</option>                  
                     <option value="200000" >200000</option>                  
                     <option value="250000" >250000</option>                  
                     <option value="300000" >300000</option>                  
                  </select>
         <select name="S_Kilometerbis" id="S_Kilometerbis"  style="display:none" >
                   <option value="">All</option>             
                   <option value="5000" >5000</option>                  
                   <option value="10000" >10000</option>                  
                   <option value="15000" >15000</option>                  
                   <option value="20000" >20000</option>                  
                   <option value="30000" >30000</option>                  
                   <option value="40000" >40000</option>                  
                   <option value="50000" >50000</option>                  
                   <option value="60000" >60000</option>                  
                   <option value="70000" >70000</option>
                   <option value="80000" >80000</option>                  
                   <option value="90000" >90000</option>                  
                   <option value="100000" >100000</option>                  
                   <option value="120000" >120000</option>                  
                   <option value="140000" >140000</option>                  
                   <option value="160000" >160000</option>                  
                   <option value="180000" >180000</option>                  
                   <option value="200000" >200000</option>                  
                   <option value="250000" >250000</option>                  
                   <option value="300000" >300000</option>
                   <option value="9999999">More than 300000 Km</option>
                  </select>

                </fieldset>
                </form>

              </td>
        </tr>
        <tr>
      <td colspan="2">
      <div style="overflow:auto;">
      <div id="val_S_Kilometervon" class="sliderval" style="float:left; width:50%; text-align:left;">&nbsp;</div>

      <div id="val_S_Kilometerbis" class="sliderval" style="float:right; width:50%; text-align:right;">&nbsp;</div>
      </div>
      </td>
</tr>
</table>
<div id="result" style="width:500px;display:block;height:150px;background:#6cdbe3;border:1px solid #28c6d2;padding:10px;" class="ui-corner-all">
</div>
</body>
</html>

Open in new window

Terry_focus

Sorry understand the output now, here's the complete solution

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript" src="js/selectToUISlider.jQuery.js"></script>
<link type="text/css" rel="stylesheet" href="css/redmond/jquery-ui-1.7.2.custom.css"  />
<link type="text/css" rel="Stylesheet" href="css/ui.slider.extras.css"  />
<style type="text/css">
/*slider */
    .ui-slider {clear: both;}
    /* end */
    </style>
<script type="text/javascript">
$(function(){
  //Fire up your plugin, more efficent to drop the select
  $('#S_Kilometervon, #S_Kilometerbis').selectToUISlider({
	    labels: 0,
	    tooltip: false,
	    sliderOptions: {
	    	stop: function(e,slider) {
				//See other post for explination
				$("#val_S_Kilometervon").html($("#S_Kilometervon option").eq(slider.values[0]).html());
				
				$("#val_S_Kilometerbis").html($("#S_Kilometerbis option").eq(slider.values[1]).html());
					
			}
	  	}
	});
});
        </script>
</head>

<body>
<table width="300px">
<tr>
 <td  class="tdnewsearch" colspan="2">
<form name="Form" id="Form" action="slidertest.cfm" method="post">
<fieldset>
          <select name="S_Kilometervon"  id="S_Kilometervon"  style="display:none" >
                     <option value="">All</option>       
                     <option value="0" >0</option>                  
                     <option value="5000" >5000</option>                  
                     <option value="10000" >10000</option>
                     <option value="15000" >15000</option>                  
                     <option value="20000" >20000</option>                  
                     <option value="30000" >30000</option>                  
                     <option value="40000" >40000</option>                  
                     <option value="50000" >50000</option>                  
                     <option value="60000" >60000</option>
                     <option value="70000" >70000</option>                  
                     <option value="80000" >80000</option>                  
                     <option value="90000" >90000</option>                  
                     <option value="100000" >100000</option>                  
                     <option value="120000" >120000</option>                  
                     <option value="140000" >140000</option>
                     <option value="160000" >160000</option>                  
                     <option value="180000" >180000</option>                  
                     <option value="200000" >200000</option>                  
                     <option value="250000" >250000</option>                  
                     <option value="300000" >300000</option>                  
                  </select>
         <select name="S_Kilometerbis" id="S_Kilometerbis"  style="display:none" >
                   <option value="">All</option>             
                   <option value="5000" >5000</option>                  
                   <option value="10000" >10000</option>                  
                   <option value="15000" >15000</option>                  
                   <option value="20000" >20000</option>                  
                   <option value="30000" >30000</option>                  
                   <option value="40000" >40000</option>                  
                   <option value="50000" >50000</option>                  
                   <option value="60000" >60000</option>                  
                   <option value="70000" >70000</option>
                   <option value="80000" >80000</option>                  
                   <option value="90000" >90000</option>                  
                   <option value="100000" >100000</option>                  
                   <option value="120000" >120000</option>                  
                   <option value="140000" >140000</option>                  
                   <option value="160000" >160000</option>                  
                   <option value="180000" >180000</option>                  
                   <option value="200000" >200000</option>                  
                   <option value="250000" >250000</option>                  
                   <option value="300000" >300000</option>
                   <option value="9999999">More than 300000 Km</option>
                  </select>

                </fieldset>
                </form>

              </td>
        </tr>
        <tr>
      <td colspan="2">
      <div style="overflow:auto;">
      <div id="val_S_Kilometervon" class="sliderval" style="float:left; width:50%; text-align:left;">All</div>

      <div id="val_S_Kilometerbis" class="sliderval" style="float:right; width:50%; text-align:right;">All</div>
      </div>
      </td>
</tr>
</table>
</div>
</body>
</html>

Open in new window

Panos

ASKER

Hi Terry_focus.
Thank you for your interest in my problem.There is still a little problem.Onmouseout the value takes the value of the next option.f.e by sliding to the right and stopping on 80000 when i leave the mouse the value changes to 9000.So getting to the right when the value is 300000,by mouseout i get the More than 300000 Km value.
Also when i leave the right slider in one position f.e. at 8000 and reload the page,the slider is still there(this is correct) but both values have value "All".

ASKER CERTIFIED SOLUTION

Terry_focus

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Panos

ASKER

Hi again.
It is still not working perfect.On reload changes the shown value to the previous value.
"The plugin itself shows the wrong values...." :This problem is still there too.

SOLUTION

Terry_focus

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Panos

ASKER

I understand the difficulties.I 'm using the version with the selects and default values in a form a.s.o.It is now impossible to change all the code.I think the best way is to keep both selects the same option-values.So i will have no problems.
Thank you for your help

Panos

ASKER

Thank you again.
regards
panos

Terry_focus

No problem,

Good luck with the rest but it would be too much to alter the widget