Support » Developing with WordPress » jQuery UI Range Slider

  • Hello,

    How does one integrate the jQuery UI Range Slider into a non-WooCommerce WordPress page so the rendered output can be filtered by custom post type meta_key? The meta_values associated to the meta_keys under consideration will always be real numbers (0-2 decimal places).

    Thank you very much,
    Don

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    The slider needs an HTML container on the page somewhere. Enqueue your UI script that initializes the slider within the container. In the PHP wp_enquqe_script() call, specify array('jquery-ui-slider', 'jquery') as the dependency argument.

    Create a callback that is hooked to one of the slider events, such as “change”. The callback gets the slider positions and sends the values to the server via Ajax request. The server side Ajax handler makes the necessary query based on the passed values and echoes out the results, the dies.

    Back at the client side Ajax call, the response closure/callback receives the echoed results from the server. Process the results as necessary and then use the result to replace the current page content affected by the slider.

    If you’ve not done Ajax in WP before, be warned that there are a few quirks beyond the usual generic Ajax techniques. I’d advise first setting up a very basic data exchange without the slider or any other complicating elements to be sure you’ve gotten the basics working. It’s too easy to get some detail wrong and debugging is hard enough without added complications. Once it’s working you can incrementally build upon what you have. Then when something doesn’t work, you don’t have to look too far to find the problem.

    You lost me at, “The server side Ajax handler…”.

    I was hoping all I would need to do is specify the path to admin-ajax.php in my jQuery script.

    I’m wondering if I should be looking at purchasing a WordPress search plugin instead of investing any more time trying to develop something on my own. Can you recommend a plugin that will query the DB for meta_keys/meta_values with preferably a slider interface rather than options from a select element or text input fields? At this point in time, a submit button isn’t a deal breaker.

    Thank you,
    Don

    • This reply was modified 2 months, 1 week ago by  55don.
    • This reply was modified 2 months, 1 week ago by  55don.
    Moderator bcworkz

    (@bcworkz)

    I’m not very knowledgeable of available plugins. You might be able to adapt the WooCommerce price slider widget code to your needs, or at least it could be a general guide on what to do. But if you were lost at Ajax handler, adaptation may be just as confusing. If you are unable to find a useful plugin, consider hiring someone to help you code your own plugin. If you don’t already have such a resource, have a look at jobs.wordpress.net or jetpack.pro .

    Thanks, I’ll review the Codex information with respect to Ajax and evaluate some plugins.

    Don

    Moderator bcworkz

    (@bcworkz)

    For general Ajax info as it relates to WP, you might also review the Plugin Handbook.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.