Calculation not working with jQuery UI Slider

Gravity Support Forums » Plugin Support » Gravity Forms

intervaro
Member

I'm trying to create a form where my customers can fill out information to see how much time they can save when using my services.

So I'm using a Number Field with Calculation. And it works as expected when I'm typing the values in the other Number Fields or Checkbox Fields.

But when I'm using the jQuery Slider to control the Number Values the Calculation is not triggered. It is triggered again when I'm filling out another field with my keyboard though.

Can i do something i my js to trigger the Calculation?

You can see the form here: http://mtaccounting.se/spara-tid/

Thank You!

Posted 12 years ago on Thursday October 18, 2012 | Permalink
Chris Hajer
Key Master

Integrating this jQuery slider is outside of the support we can provide for Gravity Forms. It looks like a really nice implementation and I hope you can make it work.

Posted 12 years ago on Wednesday October 24, 2012 | Permalink
intervaro
Member

Ok,

Thanks for your reply. Do you support some other Javascript-number sliders? Would love to do this through Gravity Forms.

Thank you!

Posted 12 years ago on Wednesday October 24, 2012 | Permalink
Chris Hajer
Key Master

There are no sliders I've seen which work with Gravity Forms without some configuration. It looks like your implementation is close. Seems like the fields are just not getting updated at the right time to enable calculations.

Posted 12 years ago on Thursday October 25, 2012 | Permalink
eCurtis
Member

Hi Intervaro,

I have been tasked with a similar project and I see you have a version working, perhaps not with number fields, on the bottom of your page. Any advice/instructions on how to get this working?

Cheers.

Posted 11 years ago on Thursday May 2, 2013 | Permalink

studio2
Member

I built a working slider. Add the class "slider" to your number field. Put the following code in document ready. This is sort of hacky and may have bugs in scenarios I wasn't trying to support, but it mostly works.

$(".slider .ginput_container :input").hide();
			  $(".slider .ginput_container .instruction").hide();

			  $("<div class='slider-value'></div>").insertBefore(".slider .ginput_container :input");
			  $("<div class='slider-display'></div>").insertAfter(".slider .ginput_container :input");

			  $(".slider-display").slider({
				  range: "min",
				  value: 1,
				  min: 1,
				  max: 1000,
				  create: function( event, ui ) {
				    var value = $(this).prev(':input').val();
					$(this).siblings('.slider-value').html( value );

					var min = parseInt($(this).next('.instruction').find('strong').eq(0).html());
					var max = parseInt($(this).next('.instruction').find('strong').eq(1).html());

					$(this).slider("option", "min",  min );
					$(this).slider("option", "max",  max);
					$(this).slider("option", "value",  value);

				  },
				  slide: function( event, ui ) {
					var value = $(this).slider( "value" );
					$(this).prev(':input').val(value);
					$(this).prev(':input').trigger("change");
					$(this).siblings('.slider-value').html( value);
				  }
			  });

It grabs the supported range from the instruction field. It's definitely not ideal but I didn't see any other place where that info is available in the DOM.

Posted 11 years ago on Thursday May 2, 2013 | Permalink