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>
