create slider filter in archive search page

This support ticket is created 2 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 3 replies, has 2 voices.

Last updated by Luo Yang 2 years, 2 months ago.

Assisted by: Luo Yang.

Author

Posts

October 17, 2022 at 11:28 pm #2477895

ashodK

Hi there

I have created a search page but am missing 1 search criteria to be properly configured.
I have a number field called Date (which is just a year)
I would like users to be able to filter/search results via year range (instead to typing the year).
How can I achieve this?
See image attached for what I have and what I'd like to have.

Thanks

October 18, 2022 at 3:04 am #2477979

Luo Yang

Hello,

In your case it needs a range filters, and it needs custom codes, see below test site:
Login URL:
hidden link

1) Create a view, filter by custom field "Date", option "Using this comparison" choose "Between", see my screenshot between1.jpg
So after user submit the search form, it will pass two URL parameters(StartDate and Enddate) to view
See the result page:
hidden link

2) Use custom CSS/JS codes to style above two fields to the slider filter, for example:
hidden link

October 18, 2022 at 3:29 am #2478007

ashodK

Where exactly do i put the code?

and is this the code?

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="hidden link"></script>
<script src="hidden link"></script>
<script>
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
} );
</script>
</head>
<body>

<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

</body>
</html>

October 18, 2022 at 4:37 am #2478035

Luo Yang

You can follow our document add custom JS/CSS codes into view:
https://toolset.com/course-lesson/adding-custom-javascript-to-views-templates-and-archives/
https://toolset.com/course-lesson/adding-custom-css-to-templates-archives-and-views/

According to our support policy, we don't provide custom codes support:
https://toolset.com/toolset-support-policy/

You can check it with our Toolset contractors:
https://toolset.com/contractors/