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.
No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.
| 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 chong-sumw 5 years, 5 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
