Range slider not working in desktop

Please help, I am using few range sliders in my APP working fine all devices as well as emulator view but it’s not working in Desktop view, any help would be really great?

For example volume and range
> Volume

        <List simpleList>
          <ListItem>
            <ListItemCell className="width-auto flex-shrink-0">
              <Icon ios="f7:speaker_fill" aurora="f7:speaker_fill" md="material:volume_mute"></Icon>
            </ListItemCell>
            <ListItemCell className="flex-shrink-3">
              <Range
                min={0}
                max={100}
                step={1}
                value={10}
              ></Range>
            </ListItemCell>
            <ListItemCell className="width-auto flex-shrink-0">
              <Icon ios="f7:speaker_3_fill" aurora="f7:speaker_3_fill" md="material:volume_up"></Icon>
            </ListItemCell>
          </ListItem>
        </List>

Does it work for you in Kitchen Sink at https://framework7.io/kitchen-sink/core/?theme=ios ?

Thanks for your reply but I tried no luck.

Hi @VinodKumar,

I am having the same problem but only with a specific customer. Do you perhaps have Bullguard antivirus software installed?

Thanks, @smipi1, no I don’t have installed Bullguard antivirus but yes other one I am using, here is a screenshot.

.

Would be good to know why it is not working:

var app = new Framework7({...});

console.log({
  ua: navigator.userAgent,
  touchEvents: app.touchEvents,
  touch: app.support.touch,
  pointerEvents: app.support.pointerEvents,
  maxTouchPoints: navigator.maxTouchPoints
})

What is in your log?

Hi @nolimits4web,

I would love to do this, but I need some help getting this wired up. We setting things up differently:

import Vue from 'vue';
import VueCookies from 'vue-cookies';
import Framework7 from 'framework7/framework7.esm.bundle.js';
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js';
import 'framework7/css/framework7.bundle.css'; 
import App from './app.vue';
Framework7.use(Framework7Vue);

export const root = new Vue({
  template: '<app/>',
  components: {
    app: App
  },
  data() {
    ...
  },
  methods: {
    ...
  }
});

Also… where does navigator come from?

Just go to https://framework7.io/kitchen-sink/core/?theme=ios
And run this in console:

console.log({
  ua: navigator.userAgent,
  touchEvents: app.touchEvents,
  touch: app.support.touch,
  pointerEvents: app.support.pointerEvents,
  maxTouchPoints: navigator.maxTouchPoints
})
1 Like

Hi @nolimits4web,

I made a minimal app with the framework7-cli, and ran it on the customer’s PC. The range slider still refuses to respond to customer input. I got the following from the console:

app.js:27 {ua: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWeb…L, like Gecko) Chrome/81.0.4044.138 Safari/537.36", touchEvents: {…}, touch: true, pointerEvents: true, maxTouchPoints: 10}maxTouchPoints: 10pointerEvents: truetouch: truetouchEvents: end: "touchend"move: "touchmove"start: "touchstart"__proto__: Objectua: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"__proto__: Object

This is not very readable, so here is a screenshot:

The test app can be found here: https://github.com/smipi1/f7-example

On my own PC, the touchEvents are pointerup, pointermove and pointerdown. Are the touch events on the customers PC not properly supported?

Thanks,
@smipi1

Ok, see the issue, will try to fix it in next update

Thanks. Any feedback on what is wrong?

Hi @nolimits4web,

Did you manage to get this into the last update?

Hi @nolimits4web,

This seems to be related to https://github.com/framework7io/framework7/issues/2540

Do you have any update on this?

Hello @nolimits4web ,
Until now, I have this issue. The range slider input is not active when I click on it. I use desktop (chrome) and F7 v.6.0.14 (core version)

Regards,

Thanks @nolimits4web I can see working perfeclty now after applying small and tiny CSS changes.

https://github.com/framework7io/framework7/commit/2bd140e6745c9dad09a46766eae4636be2549e1a

Thanks :slight_smile:

1 Like