1

I am working on an application for Windows surface and I am trying to use the Jquery UI slider. It works for mouse events, but does not work for touch.

I looked at this question here and tried its solutions, but it does not work. (Used both jquery-ui-touch-punch and 

-ms-touch-action: none;
touch-action: none;

but none of them work).

Is there any other solution for this?

I am using Chromium Portable to run the application and using 1.11.4 jquery ui and jQuery UI Touch Punch 0.2.3.

Community
  • 1
  • 1
Pritam Banerjee
  • 17,953
  • 10
  • 93
  • 108
  • Please clarify the exact JQuery and UI versions you are using. Also What browsers have you tested with on Touch devices? – Twisty Mar 28 '16 at 23:11
  • @Twisty Using 1.11.4 jquery ui and jQuery UI Touch Punch 0.2.3. – Pritam Banerjee Mar 29 '16 at 15:29
  • Ok, I setup a test using a Jquery Slider demo & Touch Punch: https://jsfiddle.net/Twisty/fLudwu2b/ – Twisty Mar 29 '16 at 15:52
  • I tested my demo with a MS Surface in Internet Explorer and the Sliders work as expected. – Twisty Mar 29 '16 at 16:22
  • @Twisty Yes, I am testing it on chromium portable. And I guess that is the reason, why it is not working. – Pritam Banerjee Mar 29 '16 at 21:21
  • 1
    Which browser are you using, Chromium? Which version? Should work fine unless there is some JS confusion in the browser itself. Can you bring up the developer tools in Chromium and see if the console is throwing any errors? Trying to replicate, but since I have a different test device, it's hard. – Twisty Mar 29 '16 at 21:50
  • @Twisty Hi Just updated the chromium portable container and now it works ... phew . Thanks a lot for your help. You can post your two comments as the answer and I can accept it. – Pritam Banerjee Mar 29 '16 at 22:23

1 Answers1

1

Based on your question, I setup the following demo w/Touch Punch:

https://jsfiddle.net/Twisty/fLudwu2b/

JQUERY

$(function() {
  $("#red, #green, #blue").slider({
    orientation: "horizontal",
    range: "min",
    max: 255,
    value: 127,
    slide: refreshSwatch,
    change: refreshSwatch
  });
  $("#red").slider("value", 255);
  $("#green").slider("value", 140);
  $("#blue").slider("value", 60);
});

I tested the demo with a Surface Device using IE. It appears to work.

I would advise checking or updating your test environment and ensure that the latest JavaScript is available in the browser.

Twisty
  • 30,304
  • 2
  • 26
  • 45