WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7 Range Slider Output Number (2 posts)

  1. sannahkhan
    Member
    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:
    http://www.therocketfactory.co.uk/planner.php

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

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

    $slider1.bind('click', function(e) {
        e.preventDefault();
        console.log($this).val());
     }

    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
    Member
    Posted 1 month ago #

    Here's my solution for showing values of ranges

    $(document).ready(function(){
    	$("input[type='range']").each(function(){
    		range_name = $(this).attr("name");
    		$(this).after("<span id="+range_name+"-val></span>");
    		$(this).on('mousedown',function(){
    			$(this).on('mousemove',function(){
    				range_name = $(this).attr("name");
    				range_value = $(this).attr("value");
    				$("#"+range_name+"-val").text(range_value);
    			});
    		});
    	});
    });

    Hope it helps.

Reply

You must log in to post.

About this Topic