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

    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 12 years ago on Saturday November 12, 2011 | Permalink
  2. sascha

    Just to add: I mean a slider field like the Jquery UI/Jquery Tools ones.

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

    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 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 12 years ago on Sunday November 13, 2011 | Permalink
  4. sascha

    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 12 years ago on Sunday November 13, 2011 | Permalink
  5. Richard Vav

    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 12 years ago on Monday November 14, 2011 | Permalink
  6. sascha

    Any news on the range input field?

    Posted 12 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 12 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 12 years ago on Saturday February 11, 2012 | Permalink
  9. Richard Vav

    @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 12 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 11 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 11 years ago on Friday May 11, 2012 | Permalink
  12. sr83

    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 11 years ago on Thursday June 14, 2012 | Permalink
  13. loeches

    Also waiting for this ! Would be great!

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

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

    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 ?

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