jQuery Slider not working on mobile as designed

Question

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>

Answer 1

To 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>

Answer 2

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