This thread is resolved. Here is a description of the problem and solution.
Problem:
I am building a custom search with custom search form where I have a range slider for number filter. I am able to get the range slider working with jQuery and jQuery UI properly on desktop. However, the range slider do not respond to touch event on mobile.
Solution:
It is a custom JS codes (range slider) with iPhone device problem, according to our support policy, we don't provide custom support
Relevant Documentation:
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 5 replies, has 2 voices.
Last updated by 5 years, 7 months ago.
Assisted by: Luo Yang.
I am building a custom search with custom search form where I have a range slider for number filter. I am able to get the range slider working with jQuery and jQuery UI properly on desktop. However, the range slider do not respond to touch event on mobile. I have added the " jQuery UI touch punch" support on the header file and the corresponding file in appropriate location , but it's still not working.
it should be a simple task but I couldn't figure out where goes wrong. I am wondering if I have done sth wrong or Toolset does not support Mobile touch event on jQuery widget? Please help! thank you so much.
location of the range slider: homepage
views id: 835, name: Search Business View
Header file:
script src="jquery.ui.touch-punch.min.js"></script>
My JS code in View:
// (1) for Price-Slider
jQuery("#price-slider").slider({
range: true,
min: 0,
max: 3000000,
step: 50000,
values: [0, 3000000],
slide: function(event, ui) {
jQuery('input[name="wpv-wpcf-selling-price_min"]').val(ui.values[0]);
jQuery('input[name="wpv-wpcf-selling-price_max"]').val(ui.values[1]);
console.log(ui.values[0]);
console.log(ui.values[1]);
let newTitle = ui.values[0] / 10000 + "萬 : " + ui.values[1] / 10000 + "萬"
// update the tooltip text
jQuery('#price-slider').attr('title', newTitle).tooltip('fixTitle').tooltip('show');
}});
// feed the new value from slider into the hidden toolset text field
jQuery('input[name="wpv-wpcf-selling-price_min"], input[name="wpv-wpcf-selling-price_max"]').change(function() {
jQuery('#price-slider').slider('values', [parseInt($('input[name="wpv-wpcf-selling-price_min"]').val()), parseInt($('input[name="wpv-wpcf-selling-price_max"]').val())]);
});
I have tried the URL you mentioned above in my Android phone, it works fine, see screenshot range-slider.JPG
Is this problem resolved? please let me know if you need more assistance for it. thanks
