What plugin are you using for this? Is it a paid plugin?
My personal search box is not a plug-in, it’s my own code: https://test.sacconicase.com/
The range slider appears to be the same that is provided by the jQuery Slider module. This module is registered as part of WP core. You can enqueue “jquery-ui-slider” in order to use it. You would also need to provide appropriate HTML and initialize the slider by calling .slider() with appropriate parameters. Check the “View source” link in the above linked slider example.
This too will not work right until any other script errors on the page are resolved.
Could I start by putting this code in my file functions.php?
function add_jquery_ui(){
// add jquery file if you required like following
wp_enqueue_script( 'jquery-ui-js', get_stylesheet_directory_uri() .'/js/jquery-ui.js', array(), '', true );
// add css files
wp_enqueue_style( 'jquery-ui-css', get_stylesheet_directory_uri() .'/css/jquery-ui.css', array(), '', 'all' );
}
add_action( 'wp_enqueue_scripts', 'add_jquery_ui' );
I should also create a file jquery-ui.js copying the code in the link https://code.jquery.com/jquery-1.10.2.js
No, please do not. I don’t know where you found that code, but it is doing it wrong. WP ships with a bunch of jQuery modules pre-registered. These are known to be compatible with the version of jQuery that WP uses. If you use an outside source for modules that already exist in core WP you’ll very likely introduce conflicts that can be very difficult to resolve. Don’t do it!
Since Slider is already registered, you merely need to do:
wp_enqueue_script('jquery-ui-slider');
from within a callback added to “wp_enqueue_scripts” action.
Additionally, as I said:
You would also need to provide appropriate HTML and initialize the slider by calling .slider() with appropriate parameters.
Since I have to put this function in the search form and in the form output
// Form output
$output = '<form class="sacconi_form" method="get" action="' . home_url('/') . '">' .
$categories . $taxonomy . $functionOspitiDropdown . $functionCamereDropdown . '<br><br>' .
'<input type="submit" name="search" value="' . esc_html__('Search', 'sacconicase') . '">' .
'</form>';
return $output;
}
I thought I could create a function such as $functionNumber
add_action( 'wp_enqueue_scripts', ' jquery-ui-slider' );
function Number() {
$functionNumber =
}
To start with. At the end I’ll put $functionNumber in the output of the form
That’s not how to use add_action(). There’s no function named ” jquery-ui-slider”, especially one with a leading space. Use it like this:
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('jquery-ui-slider');
});
The jQuery slider isn’t exactly like the movie demo example. The range in this jQuery version appears in a single text input field. If you need the values saved separately it could be done as the form submission is processed, or the initialization script could be modified to use two form fields. Your form’s HTML must include a text input field (or 2) plus a div to contain the sliders.
In the example under the “view source” link on the jQuery Slider page, these elements have IDs of “amount” and “slider-range”. You can use different IDs, but they need to be coordinated with the jQuery .slider() initialization code.
You’ll need to add your own initialization code to your page that’s similar to the example. You could do so by outputting the code as an inline script block from the “wp_head” action hook.
How can I make the slider visible in the search box? I mean which element with $ I can put in the output?
You need the entire script block from the jQueryUI.com “view source” example to appear somewhere on your page after the slider library has been loaded. The one that starts out with:
<script>
$( function() {
$( "#slider-range" ).slider({
// etc....
Coordinate #slider-range and #amount with your field’s HTML attributes. It’s unclear what field you want this for. The key “function_number” doesn’t tell me what I need to know. In any case, I recommend adding a new text field and empty div just like in the example. You have a better chance of success by closely following the example. Once the basic slider is working you can modify it to better suit your need.
While it’s possible to have the upper and lower range selection in two fields, the example code places both in one text field. I recommend using the one field example for now.
