Range Not Rendering Numbers on the Slider

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.

https://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: https://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: https://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.