UPDATE 7/24/15: As I couldn't migrate the code and was having conflicting issues I changed the library totally. The quickest fix, for me was /. It still allowed me to retrieve values work with the same shortcoding the jquery did. I can't vouch for how light this is but for a temp fix on a clients site I can recommend.
UPDATE 7/30/15: jQuery UI was already attempted and Touch Punch, they both caused further issue. Again the only solution was No UI Slider for me in this case. Your project may be different but for severe jQuery script conflicts on 4+ yr old frameworks this was my solution.
The following code (example at:) is giving me quite a pondering as I'm helping a client convert his site to responsive mode. The slider works as coded but on mobile devices the ranges only work by clicking the scale rail and not the bookends in order to define the range. I was about to just rip the code out totally but wanted to see if anyone knew of a quick fix for this issue.
jQuery version: 1.4.2
<script type="text/javascript">
$('#price-range-filter-header').click(function() {
FilterContainerSlideUpDown('filter_but', 'price-range-filter-header');
});
$(function() {
$("#slider-range").slider({
range: true,
min: 0,
max: 300,
values: [0, 300],
step: 5,
slide: function(event, ui)
{
$("#slider-range-caption").html('<?=$currency_type->symbol?>' + ui.values[0] + ' - ' + '<?=$currency_type->symbol?>' + ui.values[1]);
},
change: function(event,ui)
{
ApplyPriceRangeFilter(ui.values[0],ui.values[1]);
}
});
$("#slider-range-caption").html('<?=$currency_type->symbol?>' + $("#slider-range").slider("values", 0) + ' - ' + '<?=$currency_type->symbol?>' + $("#slider-range").slider("values", 1));
//initialise jquery scrollbar
$('.scrollbar').scrollbar();
});
</script>
<div id="filter_but" name="filter_but">
<div id="slider-range"></div>
</div>
UPDATE 7/24/15: As I couldn't migrate the code and was having conflicting issues I changed the library totally. The quickest fix, for me was http://refreshless.com/nouislider/. It still allowed me to retrieve values work with the same shortcoding the jquery did. I can't vouch for how light this is but for a temp fix on a clients site I can recommend.
UPDATE 7/30/15: jQuery UI was already attempted and Touch Punch, they both caused further issue. Again the only solution was No UI Slider for me in this case. Your project may be different but for severe jQuery script conflicts on 4+ yr old frameworks this was my solution.
The following code (example at:http://www.equant-design.com/aab/shop/category/new-in-whats-new/89) is giving me quite a pondering as I'm helping a client convert his site to responsive mode. The slider works as coded but on mobile devices the ranges only work by clicking the scale rail and not the bookends in order to define the range. I was about to just rip the code out totally but wanted to see if anyone knew of a quick fix for this issue.
jQuery version: 1.4.2
<script type="text/javascript">
$('#price-range-filter-header').click(function() {
FilterContainerSlideUpDown('filter_but', 'price-range-filter-header');
});
$(function() {
$("#slider-range").slider({
range: true,
min: 0,
max: 300,
values: [0, 300],
step: 5,
slide: function(event, ui)
{
$("#slider-range-caption").html('<?=$currency_type->symbol?>' + ui.values[0] + ' - ' + '<?=$currency_type->symbol?>' + ui.values[1]);
},
change: function(event,ui)
{
ApplyPriceRangeFilter(ui.values[0],ui.values[1]);
}
});
$("#slider-range-caption").html('<?=$currency_type->symbol?>' + $("#slider-range").slider("values", 0) + ' - ' + '<?=$currency_type->symbol?>' + $("#slider-range").slider("values", 1));
//initialise jquery scrollbar
$('.scrollbar').scrollbar();
});
</script>
<div id="filter_but" name="filter_but">
<div id="slider-range"></div>
</div>
4 Answers
Reset to default 26 +25To make jQuery UI widgets work on mobile you need to integrate support for touch events.
This has already been done in this project: jQuery UI Touch Punch
You just need to include it after jQuery and jQuery UI.
<script src="jquery.ui.touch-punch.min.js"></script>
I had the same trouble, along lots of mobile web app. Finally, fed up with touch management, external js, JQuery and so fourth, i used http://refreshless.com/nouislider/ . ( Be sure I made loots of such apps, online or Phonegap from v1.4, from 2012).
Perfect, simple, clear and therefore easily customisable.
My answer: NoUiSlider. Def.
OMG dont dive in tricky dev... make it simple
It looks to me like there are issues with the page and scrolling. If I were you, I would disable page dragging (while still allowing scrolling) so that when users slide the slider they aren't dragging the page. The following piece of code requires you to use jQuery mobile:
$(document).delegate('.ui-page', 'touchmove', false);
Alternatively, you could go with a front end framework like Foundation or Bootstrap and you could use their tools to ensure things are staying in the right place and are truly mobile friendly.
I found a solution to execute internal jQuery UI ._mouse{Down/Up/Move} functions from touch{start/end/move} events.
$(function() {
$("#slider-range").slider({
range: true,
min: 0,
max: 300,
values: [0, 300],
step: 5,
// ...
});
// workaround - convert touch to mouse events
jQuery(document).on('touchstart', '#slider-range .ui-slider-handle', function (e) {
let t = e.touches[0] || e;
jQuery(this).addClass('ui-state-hover').addClass('ui-state-active').addClass('ui-state-focus')
var newEvent = new MouseEvent('mousedown', {
screenX: t.screenX, screenY: t.screenY,
clientX: t.clientX, clientY: t.clientY,
relatedTarget: t.target,
})
Object.defineProperty(newEvent, 'target', {value: t.target, enumerable: true});
Object.defineProperty(newEvent, 'currentTarget', {value: t.target, enumerable: true});
jQuery(this).parent().slider("instance")._mouseDown(newEvent)
});
jQuery(document).on('touchend', '#slider-range .ui-slider-handle', function (e) {
let t = e.touches[0] || e;
jQuery(this).removeClass('ui-state-hover').removeClass('ui-state-active').removeClass('ui-state-focus')
var newEvent = new MouseEvent('mouseup', {
screenX: t.screenX, screenY: t.screenY,
clientX: t.clientX, clientY: t.clientY,
relatedTarget: t.target,
})
Object.defineProperty(newEvent, 'target', {value: t.target, enumerable: true});
Object.defineProperty(newEvent, 'currentTarget', {value: t.target, enumerable: true});
jQuery(this).parent().slider("instance")._mouseUp(newEvent)
});
jQuery(document).on('touchmove', '#slider-range .ui-slider-handle', function (e) {
let t = e.touches[0] || e;
var newEvent = new MouseEvent('mousemove', {
screenX: t.screenX, screenY: t.screenY,
clientX: t.clientX, clientY: t.clientY,
relatedTarget: t.target,
'bubbles': true,
'cancelable': true,
});
Object.defineProperty(newEvent, 'target', {value: t.target, enumerable: true});
Object.defineProperty(newEvent, 'currentTarget', {value: t.target, enumerable: true});
jQuery(this).parent().slider("instance")._mouseMove(newEvent);
});
});<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="filter_but" name="filter_but" style="padding: 20px;">
<div id="slider-range"></div>
</div>I tried a simpler solution with dispatchEvents but it does not work.