amishdirect on "Contact Form 7 Range Slider Output Number"

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!