WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] [closed] Range Not Rendering Numbers on the Slider (7 posts)

  1. dlucero23
    Member
    Posted 1 year ago #

    Hi, I wish I could search the WordPress support forum for this specific plugin for answers to this very basic question.

    Why is the "range" input not rendering the numbers below the slider tab?

    Here is the code and syntax of the input in Contact Forms 7:

    <p>Budget:<br />
        [range* budget min:0 max:3000 step:5]</p>

    I am using the Kickstart Theme.

    http://wordpress.org/extend/plugins/contact-form-7/

  2. dlucero23
    Member
    Posted 1 year ago #

    n/m I found the answer to my above question. The answer is that HTML 5 does not render the range with numbers all by itself.

    http://www.w3schools.com/html/html5_form_input_types.asp

    I guess then, that my NEW question is how to make my contact form input render like this guy's: http://www.therocketfactory.co.uk/planner.php

    I will do research with the "inspect element" feature of Chrome and if (when) I find the answer, I will post it here.

  3. dlucero23
    Member
    Posted 1 year ago #

    Ok I found the answer, and it is a simple one. To render the slider output:

    Use this script in the head of the document:

    <!-- Begin Javascript: Output the number of the slider code -->
    <script>
     $slider.bind('click', function(e) {
        e.preventDefault();
        console.log($this).val());
     }
    </script>
    <!-- End Javascript: Output number of the slider code -->

    Use this as the html form code in CF7:

    <!-- Use any of your custom input strings below, generally don't touch the output code (except for the value of 50 if you wish) -->
    <form oninput="output1.value=slider1.value">
        <input type="range" name="slider1" value="50"/>
        <output name="output1" for="slider1">50</output>
    </form>
    <!-- End HTML Form Code for CF7-->

    There are a few more solutions that are written differently, but achieve basically the same result. See a few more here: http://stackoverflow.com/questions/5165579/onchange-event-for-html5-range

  4. epistates
    Member
    Posted 1 year ago #

    I have the same issue and thanks for the workaround, but wouldn't it be a better solution, if the programmer of the plugin would implement this?

  5. mickif
    Member
    Posted 1 year ago #

    Hi, where do i put this:

    Use this as the html form code in CF7:

    <!-- Use any of your custom input strings below, generally don't touch the output code (except for the value of 50 if you wish) -->
    <form oninput="output1.value=slider1.value">
    <input type="range" name="slider1" value="50"/>
    <output name="output1" for="slider1">50</output>
    </form>
    <!-- End HTML Form Code for CF7-->

    Thanks!!

  6. WPGUS
    Member
    Posted 7 months ago #

    Hi, I have same issue. how I do to put this:

    <!-- Use any of your custom input strings below, generally don't touch the output code (except for the value of 50 if you wish) -->
    <form oninput="output1.value=slider1.value">
    <input type="range" name="slider1" value="50"/>
    <output name="output1" for="slider1">50</output>
    </form>
    <!-- End HTML Form Code for CF7-->

    Thanks

  7. esmi
    Forum Moderator
    Posted 7 months ago #

    @WPGUS: If you require assistance then, as per the Forum Welcome, please post your own topic. This 5 month old, resolved, topic references an old version of WordPress.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic