[Resolved] Slider search

[Author]

Posts

[fahimS-2]

I have a Toolset Archive. I have implemented a custom search with custom field. And the data type of that field is numeric. I have kept Between logic for that field. But I want to let the users set the value of the field with a slider. How can I do that?

[Luo Yang]

Hello,

There isn't such a built-in feature within Toolset plugins, you will try custom JS/CSS codes, for example, if your website supports Bootstrap 4, you can follow Bootstrap document to style the number fields as Range field:
hidden link

[fahimS-2]

I have selected 'Toolset should load Bootstrap 4' option in Toolset settings.
1. Can I implement the slider functionality now?
2. As I have selected that option, can I use bootstrap classes anywhere on my website?

Looking forward to your reply.
Thanks.

[fahimS-2]

I tried to implement the slider but failed every time. Would you mind showing me how I can implement the slider?

[Luo Yang]

Here is a sandbox website:
Login URL: hidden link

1) post view:
hidden link
in section "Search and Pagination", lines 3~5, add a HTML div tag:

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="<em><u>hidden link</u></em>"></script>
<div class="test-number-slider-range"></div>

2) In section "JS editor", add below codeS:

jQuery( document ).ready(function() {
    jQuery( ".test-number-slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 0, 300 ],
      slide: function( event, ui ) {
        jQuery( "[name='wpv-wpcf-test-number_min']" ).val( ui.values[ 0 ] );
        jQuery( "[name='wpv-wpcf-test-number_max']" ).val( ui.values[ 1 ] );
      }
	});
});

Test it in frontend:
hidden link

It works fine, for your reference.

[fahimS-2]

My issue is resolved now. Thank you!