user3371597
user3371597

Reputation: 77

How can i make a jQuery range slider touch friendly?

i use this plugin for my website:

http://codenegar.com/woocommerce-ajax-product-filter/shop/

The range slider at the right side (Filter by Price, Camera etc.) works well on mouse based systems, but its horrible to use on touch devices like iPhones, iPads, Androids... You can't drag it by touch.

How can I make this plugin work in touch devices?

Upvotes: 2

Views: 5770

Answers (3)

Antony rabel
Antony rabel

Reputation: 26

To Enable Touch action you include jQuery touch punch js

Include jQuery and jQuery UI on your page.

<script src="jquery-1.7.2.min.js"></script>
<script src="jquery-ui.min.js"></script>   
<script src="jquery.ui.touch-punch.min.js"></script>

Upvotes: 0

pxwise
pxwise

Reputation: 1360

noUISlider is a cross-browser, cross-platform and cross-device library that works out of the box and is more lightweight than jQuery UI + touchpunch.

Upvotes: 3

Foreever
Foreever

Reputation: 7468

You can use jquery range slider in touch devices by using jQuery UI Touch Punch.

Using Touch Punch is as easy as 1, 2… Just follow these simple steps:

  • Include jQuery and jQuery UI on your page.

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>   
    
  • Include Touch Punch after jQuery UI and before its first use.

    <script src="jquery.ui.touch-punch.min.js"></script>
    

Upvotes: 3

Related Questions