WordPress.org

Support

Support » Plugins and Hacks » [Resolved] Range Not Rendering Numbers on the Slider

[Resolved] Range Not Rendering Numbers on the Slider

  • 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/

Viewing 6 replies - 1 through 6 (of 6 total)
  • 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.

    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

    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?

    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!!

    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

    esmi

    @esmi

    Forum Moderator

    @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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Range Not Rendering Numbers on the Slider’ is closed to new replies.