executing a function with jquery UI slider component

Hi there,

I am new to jquery and have a basic understanding of its benifits i am trying to add its functionality to my existing site.  I have managed to get this jquery UI slider component plugin working - http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

I would like the slider to perform a javascript function everytime it changes. With the basic example

<select name="speed" id="speed">
  <option value="Slower">Slower</option>
  <option value="Slow">Slow</option>
  <option value="Med" selected="selected">Med</option>
  <option value="Fast">Fast</option>
  <option value="Faster">Faster</option>
</select>

I would normally add onchange to the select inorder to perform the function when a different value is selected, however with the jquery ui component this does not work. How should I approach this?
cookiejestAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Shahzad Fateh AliWeb Solutions Architect & Technical Project Manager- VentureDive (Pvt) LtdCommented:
Referring to

http://jqueryui.com/demos/slider/
and
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

you can use all native options as 'sliderOptions'

see my code

$('select#valueAA, select#valueBB').selectToUISlider({
				labels: 12,
				// HERE WE GO
                                 sliderOptions:{
					change:function(){
						alert('Hello World');
					}
				}
			});

Open in new window

0
cookiejestAuthor Commented:
thank you for responding. I have tried:

                  $(function(){
                  $('#posted').selectToUISlider();            
                                // HERE WE GO
                                             sliderOptions:{
                                        change:function(){
                                                alert('Hello World');
                                        }
                                }


            });

But this just gets rid of the slider all together.
0
Shahzad Fateh AliWeb Solutions Architect & Technical Project Manager- VentureDive (Pvt) LtdCommented:
post your html and i will do required modifications
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

cookiejestAuthor Commented:
ok thanks!

<script type="text/javascript">

                  $(function(){
                  $('#posted').selectToUISlider();            
                                // HERE WE GO
                                             sliderOptions:{
                                        change:function(){
                                                alert('Hello World');
                                        }
                                }


            });

      </script>

<p>posted<p>
<select name="posted" id="posted" onchange="paging('1', '','','1', '', this.value, '', '')">
  <option value="" selected="selected">All</option>
  <option value="1246533034"> Less than 24 Hours ago</option>

  <option value="1246446634" >Less than 2 days ago</option>
  <option value="1246360234">Less than 3 days ago</option>
  <option value="1246273834">Less than 4 days ago</option>
  <option value="1246187434">Less than 5 days ago</option>
  <option value="1246101034">Less than 6 days ago</option>
  <option value="1246014634">Less than 7 days ago</option>

  <option value="1245409834">Less than 2 weeks ago</option>
</select>
<p>
0
Shahzad Fateh AliWeb Solutions Architect & Technical Project Manager- VentureDive (Pvt) LtdCommented:

<script type="text/javascript">
 
                  $(function(){
                  $('#posted').selectToUISlider();            
                                // HERE WE GO
                                             sliderOptions:{
                                        change:function(event,ui){
                                                paging('1', '','','1','', ui.value, '', '');
                                        }
                                }
 
 
            });
 
      </script>
 
<p>posted<p>
<select name="posted" id="posted">
  <option value="" selected="selected">All</option>
  <option value="1246533034"> Less than 24 Hours ago</option>
 
  <option value="1246446634" >Less than 2 days ago</option>
  <option value="1246360234">Less than 3 days ago</option>
  <option value="1246273834">Less than 4 days ago</option>
  <option value="1246187434">Less than 5 days ago</option>
  <option value="1246101034">Less than 6 days ago</option>
  <option value="1246014634">Less than 7 days ago</option>
 
  <option value="1245409834">Less than 2 weeks ago</option>
</select>
<p>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
cookiejestAuthor Commented:
hmm, the function still isn't working when the slider is changed. I have changed the function to alert('Hello World'); and it still doesn't work. This is really frustrating.


<script type="text/javascript"> 
 
                  $(function(){
                  $('#posted').selectToUISlider();            
                                // HERE WE GO
                                             sliderOptions:{
                                        change:function(event,ui){
                                                alert('Hello World');                                        }
                                }
 
            });
 
      </script> 
 
 
 
 
<p>posted<p> 
<select name="posted" id="posted"> 
  <option value="" selected="selected">All</option> 
  <option value="1246537227"> Less than 24 Hours ago</option> 
  <option value="1246450827" >Less than 2 days ago</option> 
  <option value="1246364427">Less than 3 days ago</option> 
  <option value="1246278027">Less than 4 days ago</option> 
  <option value="1246191627">Less than 5 days ago</option> 
  <option value="1246105227">Less than 6 days ago</option> 
  <option value="1246018827">Less than 7 days ago</option> 
  <option value="1245414027">Less than 2 weeks ago</option> 
</select> 

Open in new window

0
Shahzad Fateh AliWeb Solutions Architect & Technical Project Manager- VentureDive (Pvt) LtdCommented:
change works when the value in slider changes and it will frustrate if you use alter. do something else with this event 'change'
0
cookiejestAuthor Commented:
im sorry im not sure i follow you
0
cookiejestAuthor Commented:
any ideas?
0
cookiejestAuthor Commented:
can anyone show me an example of this jquery plugin with a function being called everytime there is a change in the slider
0
cookiejestAuthor Commented:
ok im finally getting somewhere, this code works fine apart from the ui.value seems to output the option number rather than the actual VALUE of the select box. For example in this:

<select name="posted" id="posted">
  <option value="2342342">hello</option>
  <option value="435435" >goodbye</option>
</select>

if goodbye was selected then ui.value = 2 where as i want it to be 435435.
<script type="text/javascript">
 $(function(){
 
$('#posted').selectToUISlider({
labels: 0,
sliderOptions: {
change:function(e, ui) {
paging('1', '','','1', '',ui.value , '', '');
}
}
}); 
}); 
 
 
      </script>
 
 
 
<p>posted<p>
 
 
<select name="posted" id="posted">
  <option value="" selected="selected">All</option>
 
  <option value="1246613721"> Less than 24 Hours ago</option>
  <option value="1246527321" >Less than 2 days ago</option>
  <option value="1246440921">Less than 3 days ago</option>
  <option value="1246354521">Less than 4 days ago</option>
  <option value="1246268121">Less than 5 days ago</option>
  <option value="1246181721">Less than 6 days ago</option>
 
  <option value="1246095321">Less than 7 days ago</option>
  <option value="1245490521">Less than 2 weeks ago</option>
</select>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.