Menu icon Foundation
Range slider and NaN value

hi guys

I have a problem with a range slider.

Everything seems to be fine on pc but on my phone I noticed something weird.

When touch and move arrow then can see proper value below a slider but when I take off my finger then I get NaN value.

The value shows in meters but I added extra code for a feets.

Anyway I'm facing the same issue even I throw out my code.

Anyone could give some idea why this wont work?

The slider is embed on this site http://www.project.blueberry.ie/cherrypicker/cms2/ and is located just below the main slider.

Would be grateful for any help.

Thanks

range slider

hi guys

I have a problem with a range slider.

Everything seems to be fine on pc but on my phone I noticed something weird.

When touch and move arrow then can see proper value below a slider but when I take off my finger then I get NaN value.

The value shows in meters but I added extra code for a feets.

Anyway I'm facing the same issue even I throw out my code.

Anyone could give some idea why this wont work?

The slider is embed on this site http://www.project.blueberry.ie/cherrypicker/cms2/ and is located just below the main slider.

Would be grateful for any help.

Thanks

Mike Vranckx about 2 years ago

Hi Marcel

I had same problem using the Range Slider JS 5.5.3 component, it seems the "touches" array/list doesn't exist when "touchend" event occurs. Instead all info is part of the "changedTouches" array/list.

I patched the JS at my side, within the "get_cursor_position", here is the new code (notice the extra "else if" condition)

get_cursor_position : function (e, xy) {
    var pageXY = 'page' + xy.toUpperCase(),
        clientXY = 'client' + xy.toUpperCase(),
        position;

    if (typeof e[pageXY] !== 'undefined') {
        position = e[pageXY];
    } else if (typeof e.originalEvent[clientXY] !== 'undefined') {
        position = e.originalEvent[clientXY];
    } else if (e.originalEvent.touches && e.originalEvent.touches[0] && typeof e.originalEvent.touches[0][clientXY] !== 'undefined') {
        position = e.originalEvent.touches[0][clientXY];
    } else if (e.originalEvent.changedTouches && e.originalEvent.changedTouches[0] && typeof e.originalEvent.changedTouches[0][clientXY] !== 'undefined') {
        position = e.originalEvent.changedTouches[0][clientXY];
    } else if (e.currentPoint && typeof e.currentPoint[xy] !== 'undefined') {
        position = e.currentPoint[xy];
    }

    return position;
},

Thoriumi T almost 2 years ago

 
// call fixSlider() after each $(document).foundation();
function fixSlider(){
$("#mySlider").off('touchend');
$("#mySlider").on('touchend', function() {
event.stopPropagation();
event.preventDefault();
});
}