JQuery - add variable text to slider

Question

$('#slider').slider({ range: "min", value: 20, step: 5, min: 20, slide: function( event, ui ) { $( "#amount1" ).val( "$" + ui.value ); } }); 

This is what I have now, this is a slider displaying the value. The HTML part is as follows:

 <label for="amount">Offer:</label> <input type="text" id="amount1" /> <div id="slider"></div> 

I would like the table to be below with a block of text; except that I would like the text to change as the value increases. Say, if he were >= 20 and < 40 , he would say "Blah1" =>40 , he would say "blah2"

But I am unable to add another event to the slide function.

Thanks so much for your help, I can apply it to many things. Usually this is only one function per script, I never overlay them in layers this way.

Answer 1

All you have to do is add an extra piece of code to an existing function that evaluates the value of ui.value :

 $('#slider').slider({ range: "min", value: 20, step: 5, min: 20, slide: function(event, ui) { $("#amount1").val("$" + ui.value); if (ui.value >= 20 && ui.value < 40) { $("#message").text("greater than or equal to 20 and less than 40"); } else if (ui.value >= 40) { $("#message").text("greater than or equal to 40"); } } }); 

Example: http://jsfiddle.net/andrewwhitaker/WP29E/16/