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>
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
smipi1
May 13, 2020, 5:51pm
11
Thanks. Any feedback on what is wrong?
smipi1
May 21, 2020, 7:54pm
12
Hi @nolimits4web ,
Did you manage to get this into the last update?
smipi1
May 28, 2020, 8:42pm
13
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,