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