[Resolved] range slider of custom field

[Author]

Posts

[chong-sumw]

I want to change the max/min textfield from search filter of toolset to a ranger slider. I have got the max/min field to work properly already. Basically I have followed the two tickets to try to achieve the above: https://toolset.com/forums/topic/parametric-search-numeric-slider-for-price-range/
https://toolset.com/forums/topic/range-slider-of-custom-field/

In function.php:

// jquery UI
function load_JQuislider(){
 
wp_enqueue_script( 'jquery-ui-slider' );
	
}
add_action('wp_enqueue_scripts', 'load_JQuislider');

My code in "Search and Pagination":

            <div class="form-group">
              <label>[wpml-string context="wpv-views"]Budget[/wpml-string]</label>
              <div id="price-slider"></div>
              [wpv-control-postmeta field="wpcf-selling-price" url_param="wpv-wpcf-selling-price_min"]
              [wpv-control-postmeta field="wpcf-selling-price" url_param="wpv-wpcf-selling-price_max"]
            </div>

JS Editor:

var formatNumber = function(number)
{
    number += "";
    var parts = number.split('.');
    var integer = parts[0];
    var decimal = parts.length > 1 ? '.' + parts[1] : '';
    var regex = /(\d+)(\d{3})/;
    while (regex.test(integer))
    {
        integer = integer.replace(regex, '$1' + ',' + '$2');
    }
    return integer + decimal;
};

jQuery(document).ready(function(){
jQuery("#price-slider").slider({
    range: true,
    min: 0,
    max: 10000,
    step: 100,
    values: [0, 10000],
    slide: function(event, ui) {
        jQuery('#wpv_control_textfield_wpv-wpcf-thing-price_min').val(formatNumber(ui.values[0]));
        jQuery('#wpv_control_textfield_wpv-wpcf-thing-price_max').val(formatNumber(ui.values[1]));
}});
  
jQuery('#wpv_control_textfield_wpv-wpcf-selling-price_min, #wpv_control_textfield_wpv-wpcf-selling-price_max').change(function() {
    jQuery('#price-slider').slider('values', [parseInt($('#wpv_control_textfield_wpv-wpcf-selling-price_min').val()), parseInt($('#wpv_control_textfield_wpv-wpcf-selling-price_max').val())]);
});
});

I can't even see the sliders to appear....Please help to see what is wrong with my code. much appreciated.

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - there is no such native feature available to implement the range slider with Toolset and there is no simple way to implement it.

It will require lots of custom code, including knowledge of advanced jQuery and HTML and CSS customizations.

As you already aware that range filter is possible with using minimum value and maximum value input boxes as you can see with one of our reference site here for price field: hidden link

If you search the forum, you will find the number of tickets like you shared one already but there is no solution available. To implement such feature really needs significant customization with HTML, CSS, jQeury, PHP and Tooslet hooks and to support such custom edits is beeyond the scope of our support policy: https://toolset.com/toolset-support-policy/

As a supporter, we need to work within the defined support boundaries, as a result, I do not have any solution to offer you here.

I've two things to offer here, either contact our certified partners for such custom code.
=> https://toolset.com/contractors/
OR
Submit a new feature request:
=> https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

[chong-sumw]

I understand and thank you for your reply. However, it would be much appreciated if you could at least provide me some direction or reference tutorial on how this could be done, or show me which part of my code is wrong or missing. again, thank you very much for your help.

[Minesh]

Well - I already try to show you a way and without losing time here you should contact our certified partners:
=> https://toolset.com/contractors/

or show me which part of my code is wrong or missing. again, thank you very much for your help.
=> This is again custom code and we are not allowed to support such custom edits, hope you understand its clear.

I already acknowledge the following that says everything 🙂

If you search the forum, you will find the number of tickets like you shared one already but there is no solution available. To implement such feature really needs significant customization with HTML, CSS, jQeury, PHP and Tooslet hooks and to support such custom edits is beeyond the scope of our support policy: https://toolset.com/toolset-support-policy/

However, I will try to implement this functionality when I get such free time but there is no ETA on it.

[chong-sumw]

My issue is resolved now. Thank you!