Ready to get started?Download WordPress


Contact Form 7 Range Slider Output Number (2 posts)

  1. sannahkhan
    Posted 5 months ago #

    With Contact Form's option to display Numbers as a slider, I am baffled at the fact that it doesn't actually output the number value that the user slides. After much searching, it seems that they don't have the option to do so.

    What I'm trying to do is to allow the user to see what number they're sliding to as they are sliding. Like this:

    There was a previous post on this, and they came up with the solution with this:

    Use this script in the head of the document:

    <!-- Begin Javascript: Output the number of the slider code -->
     $slider.bind('click', function(e) {
    <!-- 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>
    <!-- End HTML Form Code for CF7-->

    So this is the code I've put into the head of my document

    $slider1.bind('click', function(e) {

    But this doesn't seem to display the value as the slider is moving... It just displays the value as 50, and it never changes. (ex http://wordofmouthmovers.ca/new/estimate/)

    Can anyone help?

  2. Bohmchri
    Posted 1 month ago #

    Here's my solution for showing values of ranges

    		range_name = $(this).attr("name");
    		$(this).after("<span id="+range_name+"-val></span>");
    				range_name = $(this).attr("name");
    				range_value = $(this).attr("value");

    Hope it helps.


You must log in to post.

About this Topic