JQuery - resetting a slider and forcing refresh of set values

Hi,
I have a jquery slider setup:

		<script>
			$(function() {
				var icon = '<%=Session("currencyicon")%>';
				var displayvalues = ['Free',icon + 500,icon + 1000,icon + 1500,icon + 2000,icon + 3000,icon + 4000,icon + 5000,icon + 6000,icon + 7000,icon + 8000,icon + 9000,icon + 10000,icon + 15000,icon + 20000,icon + 25000,icon + 30000,icon + 35000,icon + 40000,icon + 45000,icon + 50000,icon + 100000,icon + 200000 + '+'];
				var realvalues = [0,500,1000,1500,2000,3000,4000,5000,6000,7000,8000,9000,10000,15000,20000,25000,30000,35000,40000,45000,50000,100000,200000];
				var storedfrom = parseInt('<%=v_feefrom%>');
				var storedto = parseInt('<%=v_feeto%>');
				var valuefrom = realvalues.indexOf(storedfrom); // 1
				var valueto = realvalues.indexOf(storedto); // 1
				if (valuefrom == -1) {
					valuefrom = 0;
				}
				if (valueto == -1) {
					valueto = 22;
				}
				$("#feeslider").slider({
					range:true,
					min:0,
					max:22,
					values:[valuefrom,valueto],
					slide:function(event,ui){
						$("#feedisplay").html(displayvalues[ui.values[0]]+" to "+displayvalues[ui.values[1]]);
						$("#feefrom").val(realvalues[ui.values[0]]);
						$("#feeto").val(realvalues[ui.values[1]]);
					}
				});
				$("#feedisplay").html(displayvalues[$("#feeslider").slider("values",0)]+" to "+displayvalues[$("#feeslider").slider("values",1)]);
				$("#feefrom").val(realvalues[$("#feeslider").slider("values",0)]);
				$("#feeto").val(realvalues[$("#feeslider").slider("values",1)]);
			});
		</script>

Open in new window



It works a treat.

I have a rest button on the form that resets the slider (amonst other things):

	$("#reset").bind( "click", function() {
		$("#feeslider").slider("values", 0, 0);
		$("#feeslider").slider("values", 1, 22);
	});

Open in new window


When I use the reset button it resets the slider position just fine, but it doesn't fire the code in the same way as when the user changes the slider position, so the fields that get updated when the user slides the slider are not updated when the reset button programmatically resets them.

Is there a way of forcing the functionality of the slider to fire the code the same way either by changing the way I am resetting or changing the slider function (maybe by firing it on a change of value in some way?).

Some ideas would be greatly appreciated.

Regards,
LVL 2
splantonAsked:
Who is Participating?
 
vr6rConnect With a Mentor Commented:
I would break out the code for the "slide" event that you set during initialization of the slide control into its own function, then call that function from the slide event.  

Then you can just call that same function in your reset button click (or from anywhere else you want to initiate the slide function).

replace your $('#feeslider').slider... with this:
$("#feeslider").slider({
	range:true,
	min:0,
	max:22,
	values:[valuefrom,valueto],
	slide: sliding
});

function sliding(){
	var sld = $('#feedisplay');
	$("#feedisplay").html(displayvalues[sld.slider("values", 0)]+" to "+displayvalues[sld.slider("values", 1)]);
	$("#feefrom").val(realvalues[sld.slider("values", 0)]);
	$("#feeto").val(realvalues[sld.slider("values", 1)]);
}

Open in new window


and replace your reset button code with this:
$("#reset").bind( "click", function() {
	$("#feeslider").slider("values", 0, 0);
	$("#feeslider").slider("values", 1, 22);
	sliding();
});

Open in new window

0
 
splantonAuthor Commented:
vr6r,
Firstly, apologies for the lateness getting back to you. I tried this solution but all I get is an interesting debug message:
"Error: cannot call methods on slider prior to initialization; attempted to call method 'values'"

I am now stumped.

Regards,
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.