Me again, It works on one phone but doesn’t work on other. This behavior I have seen many times in past using Ionic and Framework7.

Is this because vendor’s implementation of Android webview are so different?

This is a naive implementation of ons-range / v-ons-range improvement, character inside circle slider thumb.

CSS rule:

.thumb-a .range__input::-webkit-slider-thumb:before {
  content: "A";
  position: relative;
  left: 9px;
  top: 6px;
}

.thumb-b .range__input::-webkit-slider-thumb:before {
  content: "B";
  position: relative;
  left: 9px;
  top: 6px;
}

.thumb-c .range__input::-webkit-slider-thumb:before {
  content: "C";
  position: relative;
  left: 9px;
  top: 6px;
}

HTML usage (ons-range / v-ons-range):

<ons-range style="width: 100%;" class="thumb-a"></ons-range>
<br /><br />
<v-ons-range v-model="valueB" style="width: 100%;" class="thumb-b"></v-ons-range>

It works inside monaca debugger but doesn’t work in monaca ide preview in Chrome.

Hope this help :-)

@Fran-Diox

1st: I can confirm you are right. Using the latest versions of OnsenUI and Vue-OnsenUI works like a charm.
2nd: Thank you for your response, help and “the fix”.

I like OnsenUI so much! :-)

Hi all,

I would like to inform that in some cases Onsen UI with VueJS do NOT work - it depends of files versions (and maybe something else…).

I have two similar projects in monaca.io.

This combination DOES work in monaca debugger and as a standalone application (built with monaca)
onsenui (both css and js): 2.7.0
vue-onsenui.js: 2.3.0
vue.min.js: 2.5.3

Tis combinations DOESN’T work in monaca debugger and as a standalone application (built with monaca)
onsenui (both css and js): 2.8.1
vue-onsenui.js: 2.3.0 or 2.4.0
vue.min.js: 2.5.3

The strange things is that on some phones it works and on some it doesn’t work (both in monaca debugger and standalone app).

There is an error from monaca debugger: “undefined is not a function www/lib/onsenui/js/vue-onsenui.js 1439”.

How to solve it?