PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Calculation not working with jQuery UI Slider

  1. 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:

    Thank You!

    Posted 8 years ago on Thursday October 18, 2012 | Permalink
  2. 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 8 years ago on Wednesday October 24, 2012 | Permalink
  3. Ok,

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

    Thank you!

    Posted 8 years ago on Wednesday October 24, 2012 | Permalink
  4. 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 8 years ago on Thursday October 25, 2012 | Permalink
  5. 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?


    Posted 8 years ago on Thursday May 2, 2013 | Permalink
  6. studio2

    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");
    				  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).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 8 years ago on Thursday May 2, 2013 | Permalink