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.

Jquery Slider Field

  1. sascha
    Member

    Hi there,
    is it possible to make a GF field a slider field (Jquery)? Meaning I set a value let's say from 1 to 100 and then the user just pushes a slider to the amount he wants. That amount then gets saved in the field on submission. Has anyone got experience with this? Does anybody know how to implement this?
    I have seen a closed 3 post discussion on this on this forum. When will a slider field be standard with GF?

    Posted 8 years ago on Saturday November 12, 2011 | Permalink
  2. sascha
    Member

    Just to add: I mean a slider field like the Jquery UI/Jquery Tools ones.
    See: http://flowplayer.org/tools/rangeinput/

    Posted 8 years ago on Saturday November 12, 2011 | Permalink
  3. Richard Vav
    Administrator

    I haven't used jquery tools but I have tested the standard jquery ui slider in the past, once you have included the jquery ui script and css in your themes header add this code http://pastie.org/2857572 to the page your form is going to be on by inserting it above the gravity form short code, the other option would be to include it in a html block on the form itself. Add a number field to your form which will house your sliders value when the form is submitted, add a html block directly after the number field in this you can add a basic div and give it an id such as <div id="slider-range"></div>

    Next find out the field number for your input and then head back to that first section of code and look for #input_7_2 and customise it to match your form (7 is your form number and 2 is your field number).

    Adjust the min and max values to whatever you want them to be say min:1 ,max:100
    Set your starting value where it says value:30.5
    If you are working with whole numbers and incrementing in 1's you can remove the 'step' code but if you are working with decimals or incrementing by odd numbers set the step to whatever suits your needs.

    Hope this helps!

    Posted 8 years ago on Sunday November 13, 2011 | Permalink
  4. sascha
    Member

    Hi Richard,
    that helped a lot. Thank you for the detailed instructions! I got it to work first time round! This option will do for now until the the new HTML 5 "Range" field is introduced to GF. So the obvious question to the GF team:
    When do you think will the range field be introduced to GF?

    Posted 8 years ago on Sunday November 13, 2011 | Permalink
  5. Richard Vav
    Administrator

    Hi sascha, I just remembered if you are leaving the number field editable so they can enter the number directly and want the slider position to be updated automatically you can add the following code

    $("#input_7_2").blur(function() {
    $("#slider-range").slider('option', 'value', parseInt($(this).val()));
    });

    Posted 8 years ago on Monday November 14, 2011 | Permalink
  6. sascha
    Member

    Any news on the range input field?

    Posted 8 years ago on Wednesday November 30, 2011 | Permalink
  7. The jquery solution is ok, but I'd also like to push for this feature to be built in to the plugin as a different field type.

    Posted 8 years ago on Thursday February 9, 2012 | Permalink
  8. When I use this it works, until i do not fill in a required field input. The slider just disappears on submit. Any suggestions?

    Posted 8 years ago on Saturday February 11, 2012 | Permalink
  9. Richard Vav
    Administrator

    @Jonathantgiles can you post a link to a page with your form on it, in the few tests I carried out the slider has always remained.

    Posted 8 years ago on Tuesday February 14, 2012 | Permalink
  10. This technique works for me until i use it in a multi-page form. Once I transition away from the page with the slider, the value gets reset to it's default amount.

    Is there a way for the value to persist across multi-page forms?

    Posted 7 years ago on Wednesday May 9, 2012 | Permalink
  11. Anyone have a good technique for making ui slider values persistent across multi-page forms?

    Posted 7 years ago on Friday May 11, 2012 | Permalink
  12. sr83
    Member

    sascha's jQuery UI method is OK but doesn't work on multipage forms so is not a solution for many of us.

    +1 for adding a slider field to Gravity Forms.

    Posted 7 years ago on Thursday June 14, 2012 | Permalink
  13. loeches
    Member

    Also waiting for this ! Would be great!

    Posted 7 years ago on Tuesday February 19, 2013 | Permalink
  14. Thank you for your vote.

    Posted 7 years ago on Friday February 22, 2013 | Permalink
  15. armagri
    Member

    Hello there, anybody working on this??
    not enough info out there for implementing such a rich UX feature into GF.
    has anyone tried GF with this plugin ? http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

    Posted 6 years ago on Monday April 15, 2013 | Permalink