Contact Form 7 Range Slider Output Number

  • 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:
    https://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 https://wordofmouthmovers.ca/new/estimate/)

    Can anyone help?

Viewing 5 replies - 1 through 5 (of 5 total)

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

    Hi there!

    While trying to find a solution for this, I ended up just making my own. Figured I share the information in hopes it saves someone else some time. I’ll give step-by-step instructions on how I did this. First, in the form builder, make a range slider. For example, mine was [range range-24 min:500 max:5000 step:50]. Note: the name of the slider is important

    Add this script to the header or bottom right before the end of the body tag:

    <script>
    var budget = 0;
    var min_budget = 500;
    var max_budget = 5000;
    html = '<input type="range" name="range-24" step="50" class="wpcf7-form-control wpcf7-range wpcf7-validates-as-number" aria-invalid="false" min="'+min_budget+'" max="' + max_budget + '" value="'+budget+'" name="budget" id="budget_range" />\
    <span>' + budget + '</span>';

    $(".range-24").append(html);

    $('#budget_range').on("change mousemove", function() {
    $(this).next().html($(this).val());
    });
    </script>

    Note the name in the code. Since my slider was named range-24 the range slider I made must also be the same name. You can change the min and max number to whatever you like. Where it says:

    $(".range-24").append(html);

    Change that out to what you named your range slider. If you named it Budget Slider for example, you should change it to .budget-slider. I’ve tested this and it does send the value of the slider in the email.

    To remove the other slider CF7 slider, I simply used CSS to do it. Here is my css for it:

    .range-24 input:first-child { display: none;}

    Change the range-24 with the name of your range slider’s name. Hope this helps someone!

    Hi couple of questions and first, really really appreciate you posting your solution!!

    1. Just a bit confused about execution:

    $(“.range-24”).append(html);

    $(‘#budget_range’).on(“change mousemove”, function() {
    $(this).next().html($(this).val());
    });
    </script>

    Note the name in the code. Since my slider was named range-24 the range slider I made must also be the same name. You can change the min and max number to whatever you like. Where it says:

    $(“.range-24”).append(html);

    Where would I insert the values? I need to users to be able to choose a year using the slider. Range is from min value of 1897 to maximum value of 1996.

    Thanks so so much!
    -GiaP

    If it helps, here is what I have so far…

    <script>
var budget = 0;
var min_year = 1897;
var max_year = 1996;
html = '<input type="range" name="birth-year" step="1" class="wpcf7-form-control wpcf7-range wpcf7-validates-as-number" aria-invalid="false" min="'+min_year+'" max="' + max_year + '" value="'+year+'" name="year" id="year_range" />\
<span>' + year + '</span>';

$(".birth-year").append(html);

$('#budget_range').on("change mousemove", function() {
$(this).next().html($(this).val());
});
</script>

    Thanks again!

    You still had parts of it calling my old script (#budget_range).

    I changed it all up for what I think you’re looking for. Here you go ??

    var year = 1897;
    var min_year = 1897;
    var max_year = 1996;
    html = ‘<input type=”range” name=”birth-year” step=”1″ class=”wpcf7-form-control wpcf7-range wpcf7-validates-as-number” aria-invalid=”false” min=”‘+min_year+'” max=”‘ + max_year + ‘” value=”‘+year+'” name=”year” id=”year_range” />\
    <span>’ + year + ‘</span>’;

    $(“.birth-year”).append(html);

    $(‘#year_range’).on(“change mousemove”, function() {
    $(this).next().html($(this).val());
    });

    Hope this helps!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Contact Form 7 Range Slider Output Number’ is closed to new replies.