Complete example using flexible filter groups This example uses the {number_range_groups} {list_groups} {search_groups} variable pairs and selects the correct html based on the group type. You can add extra fields to this example and they should show up automatically.

reefine-flexible-filter-groups-example.html

{exp:reefine filter:search:fields="title|product_type|colour"
filter:search:type="search" filter:price:fields="price"
filter:price:type="number_range"
filter:fields="product_type|size|colour" channel="clothes"
parse="inward"
url="/{segment_1}/{segment_2}/{product_type}/{size}/{colour}/{price}/{search}/#reefine"
}
<div class="reefine" id="reefine">
	<div role="search">
		<div class="reefine_search">
			{search_groups} {filters}
			<form method="post" class="{filter_active_class}">
				<input type="hidden" name="XID" value="{XID_HASH}" /> <label
					for="{group_name}">{label}</label> <input type="text"
					id="{group_name}" name="{group_name}" placeholder="search"
					value="{filter_title}" title="Search ({filter_quantity})" /> <input
					type="submit" name="submit" value="Go" />
			</form>
			<!-- {url}{filter_active_boolean} -->
			{/filters} {/search_groups}
		</div>
		<div class="reefine_sidebar">

			<div class="reefine_active_filters">
				<h3>Selected Criteria</h3>
				<ul>
					{active_groups}
					<li><strong><a class="remove-filter"
							href="{clear_url}">{label}:</a></strong></li> {filters}
					<li class="{filter_active_class}"
						aria-selected="{filter_active_boolean}"><a href="{url}">{filter_title}
							({filter_quantity})</a></li>
					<!-- {filter_min_value}{filter_max_value} -->
					{/filters} {/active_groups}
				</ul>
				<p class="total_entries">{total_entries} items found</p>
			</div>

			<div class="reefine_filters">
				{number_range_groups}
				<h3 class="group_{group_name}">{label}</h3>
				<form method="post" class="number_range">
					<input type="hidden" name="XID" value="{XID_HASH}" /> {filters} <input
						type="text" name="{group_name}_min" id="{group_name}_min"
						placeholder="{filter_min}" value="{filter_min_value}"
						aria-label="Minimum value" /> &mdash; <input type="text"
						name="{group_name}_max" id="{group_name}_max"
						placeholder="{filter_max}" value="{filter_max_value}"
						aria-label="Maximum value" /> {/filters} <input type="submit"
						name="submit" value="Go" />
				</form>
				{/number_range_groups} {list_groups}
				<h3 class="group_{group_name}">{label}</h3>
				<ul>
					{filters}
					<li class="{filter_active_class}"
						aria-selected="{filter_active_boolean}"><a href="{url}">{filter_title}
							({filter_quantity})</a></li> {/filters}
				</ul>
				{/list_groups}
			</div>
		</div>
	</div>

	<div class="reefine_entries">
		{entries} {if entry_ids=='-1'}
		<p>No matching products found.</p>
		{/if} {exp:channel:entries entry_id="{entry_ids}"
		disable="categories|category_fields|member_data" dynamic="no"
		orderby="title" sort="asc" status="not closed" limit="8"
		paginate="yes"}
		<div class="reefine_product size_{size}">
			<div class="reefine_product_image">
				<img src="{product_image}" alt="{title}" />
			</div>
			<div class="reefine_product_caption">
				<a href="#"
					onclick="alert('You clicked ' + this.textContent);return false;">{title}</a>
				<div class="reefine_product_price">&pound;{price}</div>
			</div>
			<div class="reefine_product_links">
				<a href="#">Buy Now</a> | <a href="#">Read More</a>
			</div>
		</div>
		{paginate}
		<div class="paging">Page {current_page} of {total_pages} pages
			{pagination_links}</div>
		{/paginate} {/exp:channel:entries} {/entries}
	</div>
</div>
{/exp:reefine}