{"id":173313,"date":"2023-04-21T09:44:39","date_gmt":"2023-04-21T09:44:39","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/make-range-slider-for-contact-form-7\/"},"modified":"2026-06-29T09:49:34","modified_gmt":"2026-06-29T09:49:34","slug":"make-range-slider-for-contact-form-7","status":"publish","type":"plugin","link":"https:\/\/kn.wordpress.org\/plugins\/make-range-slider-for-contact-form-7\/","author":20419894,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0","stable_tag":"trunk","tested":"7.0.2","requires":"5.5","requires_php":"7.2","requires_plugins":null,"header_name":"Range Slider For Contact Form 7","header_author":"","header_description":"This plugin allows create Range slider Field For Contact Form 7 plugin.","assets_banners_color":"dfe1e8","last_updated":"2026-06-29 09:49:34","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":20,"downloads":1337,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":{"1.0":"<p>Initial release. No upgrade steps required.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3475273,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3475273,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3475273,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3475273,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":2902209,"resolution":"1","location":"assets","locale":"","width":1502,"height":723},"screenshot-2.png":{"filename":"screenshot-2.png","revision":2902209,"resolution":"2","location":"assets","locale":"","width":1501,"height":745},"screenshot-3.png":{"filename":"screenshot-3.png","revision":2902209,"resolution":"3","location":"assets","locale":"","width":1072,"height":804},"screenshot-4.png":{"filename":"screenshot-4.png","revision":2902209,"resolution":"4","location":"assets","locale":"","width":1032,"height":592}},"screenshots":{"1":"CF7 form editor \u2014 \"range slider\" tag button highlighted in the form toolbar","2":"CF7 form template \u2014 generated [range_slider] shortcode tag shown in the form body","3":"Form-tag Generator modal \u2014 name, ID, class, single\/double slider type, min\/max range, default, tooltip, step, and range label options","4":"Front-end contact form \u2014 single range slider and double range slider both rendered with tick labels"}},"plugin_section":[],"plugin_tags":[177135,219988,269420,269418,269419],"plugin_category":[],"plugin_contributors":[],"plugin_business_model":[],"class_list":["post-173313","plugin","type-plugin","status-publish","hentry","plugin_tags-cf7-range-slider","plugin_tags-contact-form-7-range-slider","plugin_tags-range-input-contact-form-7","plugin_tags-range-slider-contact-form-7","plugin_tags-slider-field-contact-form-7","plugin_committers-howdytheme"],"banners":{"banner":"https:\/\/ps.w.org\/make-range-slider-for-contact-form-7\/assets\/banner-772x250.png?rev=3475273","banner_2x":"https:\/\/ps.w.org\/make-range-slider-for-contact-form-7\/assets\/banner-1544x500.png?rev=3475273","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/make-range-slider-for-contact-form-7\/assets\/icon-128x128.png?rev=3475273","icon_2x":"https:\/\/ps.w.org\/make-range-slider-for-contact-form-7\/assets\/icon-256x256.png?rev=3475273","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/make-range-slider-for-contact-form-7\/assets\/screenshot-1.png?rev=2902209","caption":"CF7 form editor \u2014 \"range slider\" tag button highlighted in the form toolbar"},{"src":"https:\/\/ps.w.org\/make-range-slider-for-contact-form-7\/assets\/screenshot-2.png?rev=2902209","caption":"CF7 form template \u2014 generated [range_slider] shortcode tag shown in the form body"},{"src":"https:\/\/ps.w.org\/make-range-slider-for-contact-form-7\/assets\/screenshot-3.png?rev=2902209","caption":"Form-tag Generator modal \u2014 name, ID, class, single\/double slider type, min\/max range, default, tooltip, step, and range label options"},{"src":"https:\/\/ps.w.org\/make-range-slider-for-contact-form-7\/assets\/screenshot-4.png?rev=2902209","caption":"Front-end contact form \u2014 single range slider and double range slider both rendered with tick labels"}],"raw_content":"<!--section=description-->\n<p><strong>Range Slider For Contact Form 7<\/strong> is a free WordPress plugin that lets you easily add an interactive range slider input field to any Contact Form 7 form. No coding required \u2014 simply use the built-in tag generator to configure your slider and insert it into your form in seconds.<\/p>\n\n<p>Whether you need a price range selector, a rating scale, a quantity picker, or any other numerical input, this plugin gives your visitors a smooth and mobile-friendly slider experience right inside your CF7 form.<\/p>\n\n<p><a href=\"https:\/\/www.topsmodule.com\/how-to-add-range-slider-for-contact-form-7\/\">Documentation<\/a>\n<a href=\"https:\/\/topsmodule.com\/task\/range-slider-for-contact-form-7\/range-slider\/\">Live Demo<\/a>\n<a href=\"https:\/\/www.topsmodule.com\/product\/range-slider-for-contact-form-7\/\">Get Pro Version<\/a><\/p>\n\n\n\n<h4>Why Use Range Slider For Contact Form 7?<\/h4>\n\n<p>Standard Contact Form 7 does not include a range slider field out of the box. This plugin fills that gap by registering a native <code>[range_slider]<\/code> form tag directly inside the CF7 tag generator \u2014 the same familiar interface you already use. Configure everything visually, click \"Insert Tag\", and you are done.<\/p>\n\n\n\n<h4>FREE Features<\/h4>\n\n<ul>\n<li><strong>Single Range Slider<\/strong> \u2014 Add a clean, single-handle slider field to any Contact Form 7 form.<\/li>\n<li><strong>Min &amp; Max Range<\/strong> \u2014 Define the minimum and maximum numeric boundaries of the slider.<\/li>\n<li><strong>Set Default Slider Value<\/strong> \u2014 Pre-select a starting value so the slider is never empty on page load.<\/li>\n<li><strong>Show \/ Hide Tooltip<\/strong> \u2014 Optionally display a tooltip above the slider handle showing the current value as the user drags it.<\/li>\n<li><strong>Show \/ Hide Range Label<\/strong> \u2014 Toggle the min and max labels displayed at each end of the slider track.<\/li>\n<li><strong>Required Field Validation<\/strong> \u2014 Mark the slider field as required; CF7 will block form submission and display an error if the field is left at its default empty state.<\/li>\n<li><strong>Custom ID &amp; Class<\/strong> \u2014 Assign a custom HTML <code>id<\/code> and\/or <code>class<\/code> to the slider wrapper for easy CSS styling or JavaScript targeting.<\/li>\n<li><strong>Seamless CF7 Tag Generator Integration<\/strong> \u2014 Configure the slider entirely through the familiar Contact Form 7 tag generator panel \u2014 no manual shortcode editing needed.<\/li>\n<li><strong>Mail Tag Support<\/strong> \u2014 The selected slider value is available as a mail tag so you can include it in CF7 email notifications and auto-replies.<\/li>\n<li><strong>Mobile Friendly<\/strong> \u2014 The slider is fully touch-enabled and responsive, working smoothly on phones and tablets.<\/li>\n<li><strong>Lightweight<\/strong> \u2014 Loads only a single minified JS file and a single minified CSS file on the front end.<\/li>\n<\/ul>\n\n\n\n<h4>\ud83d\udd12 PRO Version Features<\/h4>\n\n<p>The following features are available exclusively in the <strong>Pro (Premium) version<\/strong> of Range Slider For Contact Form 7. They are visible but locked in the free plugin's tag generator.<\/p>\n\n<p><strong>1. Double Range Slider<\/strong>\nAdd a two-handle slider that lets users select a range between two values (e.g. a price range of $200\u2013$800). The double slider outputs both the lower and upper values to the form \u2014 perfect for booking filters, budget selectors, and age-range inputs.<\/p>\n\n<p><strong>2. Step Value Control<\/strong>\nDefine a custom step increment for the slider handle (e.g. a step of 10 means the slider snaps to 0, 10, 20, 30 \u2026 rather than every integer). This is essential when you need the user to select from a fixed set of values rather than an arbitrary number.<\/p>\n\n<p>\ud83d\udc49 <a href=\"https:\/\/www.topsmodule.com\/product\/range-slider-for-contact-form-7\/\">Upgrade to Pro<\/a><\/p>\n\n\n\n<h4>How to Use<\/h4>\n\n<ol>\n<li>Make sure <strong>Contact Form 7<\/strong> is installed and activated.<\/li>\n<li>Install and activate <strong>Range Slider For Contact Form 7<\/strong>.<\/li>\n<li>Open any Contact Form 7 form in the editor.<\/li>\n<li>Click the <strong>range slider<\/strong> button in the tag generator toolbar.<\/li>\n<li>Configure your slider options (name, min, max, default value, tooltip, label).<\/li>\n<li>Click <strong>Insert Tag<\/strong> \u2014 the <code>[range_slider]<\/code> shortcode is added to your form.<\/li>\n<li>Add the corresponding mail tag (e.g. <code>[your-slider]<\/code>) to your email template if you want the value included in notifications.<\/li>\n<li>Save the form. The slider will now appear on your front-end form.<\/li>\n<\/ol>\n\n\n\n<h4>Use Cases<\/h4>\n\n<ul>\n<li><strong>Price \/ Budget Range<\/strong> \u2014 Let users specify their budget before submitting an enquiry.<\/li>\n<li><strong>Rating &amp; Satisfaction Surveys<\/strong> \u2014 Collect numeric ratings (e.g. 1\u201310 satisfaction score).<\/li>\n<li><strong>Age or Year Selection<\/strong> \u2014 Replace a plain number field with a more intuitive slider.<\/li>\n<li><strong>Quantity Selector<\/strong> \u2014 Allow users to pick quantities in a visually engaging way.<\/li>\n<li><strong>Booking &amp; Availability Forms<\/strong> \u2014 Combine with other CF7 fields to build rich booking enquiry forms.<\/li>\n<\/ul>\n\n<!--section=installation-->\n<p><strong>Option 1 \u2014 WordPress Plugin Directory (Recommended)<\/strong><\/p>\n\n<ol>\n<li>Go to your WordPress dashboard \u2192 Plugins \u2192 Add New.<\/li>\n<li>Search for <strong>Range Slider For Contact Form 7<\/strong>.<\/li>\n<li>Click <strong>Install Now<\/strong>, then <strong>Activate<\/strong>.<\/li>\n<\/ol>\n\n<p><strong>Option 2 \u2014 Manual Upload<\/strong><\/p>\n\n<ol>\n<li>Download the plugin <code>.zip<\/code> file.<\/li>\n<li>Go to Plugins \u2192 Add New \u2192 Upload Plugin.<\/li>\n<li>Choose the <code>.zip<\/code> file and click <strong>Install Now<\/strong>, then <strong>Activate<\/strong>.<\/li>\n<\/ol>\n\n<p><strong>After Activation<\/strong><\/p>\n\n<ol>\n<li>Make sure Contact Form 7 is already installed and active.<\/li>\n<li>Open any CF7 form, click the <strong>range slider<\/strong> tag generator button, configure your options, and insert the tag.<\/li>\n<li>Keep both plugins updated to ensure compatibility.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20plugin%20require%20contact%20form%207%3F\"><h3>Does this plugin require Contact Form 7?<\/h3><\/dt>\n<dd><p>Yes. Range Slider For Contact Form 7 is an add-on for Contact Form 7 and will not work without it. Please install and activate CF7 first.<\/p><\/dd>\n<dt id=\"can%20i%20add%20more%20than%20one%20range%20slider%20to%20a%20single%20form%3F\"><h3>Can I add more than one range slider to a single form?<\/h3><\/dt>\n<dd><p>Yes. You can insert multiple <code>[range_slider]<\/code> tags in one form. Just give each slider a unique <strong>Name<\/strong> in the tag generator.<\/p><\/dd>\n<dt id=\"will%20the%20selected%20slider%20value%20be%20included%20in%20the%20cf7%20email%20notification%3F\"><h3>Will the selected slider value be included in the CF7 email notification?<\/h3><\/dt>\n<dd><p>Yes. After inserting the slider tag, go to the <strong>Mail<\/strong> tab of your CF7 form and add the corresponding mail tag (e.g. <code>[your-slider-name]<\/code>) anywhere in the email body or subject.<\/p><\/dd>\n<dt id=\"is%20the%20slider%20mobile-friendly%3F\"><h3>Is the slider mobile-friendly?<\/h3><\/dt>\n<dd><p>Yes. The slider supports touch events and works on iOS and Android devices.<\/p><\/dd>\n<dt id=\"how%20do%20i%20set%20a%20default%20starting%20value%20for%20the%20slider%3F\"><h3>How do I set a default starting value for the slider?<\/h3><\/dt>\n<dd><p>In the tag generator, enter your desired starting value in the <strong>Set Range<\/strong> field. For the free (single) slider, enter a single number (e.g. <code>20<\/code>). For the Pro double slider, enter two values separated by a hyphen (e.g. <code>20-80<\/code>).<\/p><\/dd>\n<dt id=\"can%20i%20style%20the%20slider%20to%20match%20my%20theme%3F\"><h3>Can I style the slider to match my theme?<\/h3><\/dt>\n<dd><p>Yes. The slider wrapper receives the CSS class <code>rslider_container<\/code> and any custom class you specify in the <strong>Class<\/strong> field. You can override the default styles in your theme's CSS.<\/p><\/dd>\n<dt id=\"what%20is%20the%20difference%20between%20the%20free%20and%20pro%20versions%3F\"><h3>What is the difference between the free and pro versions?<\/h3><\/dt>\n<dd><p>The free version provides a single-handle range slider with full min\/max, default value, tooltip, label, required field, and custom ID\/class support. The Pro version adds a <strong>Double Range Slider<\/strong> (two handles for selecting a range between two values) and a <strong>Step Value<\/strong> control (snap the slider to fixed increments).<\/p><\/dd>\n<dt id=\"where%20can%20i%20find%20documentation%3F\"><h3>Where can I find documentation?<\/h3><\/dt>\n<dd><p>Full documentation is available at [https:\/\/www.topsmodule.com\/how-to-add-range-slider-for-contact-form-7\/]<\/p><\/dd>\n<dt id=\"where%20can%20i%20see%20a%20live%20demo%3F\"><h3>Where can I see a live demo?<\/h3><\/dt>\n<dd><p>Visit the live demo at [https:\/\/topsmodule.com\/task\/range-slider-for-contact-form-7\/range-slider\/]<\/p>\n\n<\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<li>Single range slider field for Contact Form 7.<\/li>\n<li>Min \/ Max range configuration.<\/li>\n<li>Default value (Set Range) option.<\/li>\n<li>Tooltip show\/hide toggle.<\/li>\n<li>Range label (min\/max labels) show\/hide toggle.<\/li>\n<li>Required field validation support.<\/li>\n<li>Custom ID and Class options.<\/li>\n<li>CF7 tag generator integration.<\/li>\n<li>Mail tag support.<\/li>\n<li>Mobile-friendly touch support.<\/li>\n<\/ul>","raw_excerpt":"Add a fully customizable range slider field to your Contact Form 7 forms \u2014 with min\/max range, tooltips, labels, and default value support.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/kn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/173313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/kn.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/kn.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=173313"}],"author":[{"embeddable":true,"href":"https:\/\/kn.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/howdytheme"}],"wp:attachment":[{"href":"https:\/\/kn.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=173313"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/kn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=173313"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/kn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=173313"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/kn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=173313"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/kn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=173313"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/kn.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=173313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}