Good morning guys,
I have a little problem. In one page I have something like:
div id=“price-filter”
class=“range-slider range-slider-init color-green”
data-label=“true”
data-min=“0”
data-max=“0”
data-step=“0” (of course with well formed html)
and under page:init for the specific page i just have:
var _r = app.range.get(’.range-slider’)
_r.max = max;
to change the attributes of the slider.
To get the value after user input:
$$(’.range-slider’).on(‘range:change’, function (e, range) { //etc. etc. }
So something very easy… but nothing… it do not work at the first load of the view.
And no matter if I let it istanciate automatically thank to the given class range-slider-init" or if I istanciate it manually with range.create … the first time the page is loaded it will return NaN every time 
Then after the page is loaded I can change the page and returning and every thing work fine… it only happen at the first load of the page.
I have searched everything related on this error… i know it is Dom related (pretty sure some mistake i have made in the flow of the app related to the range slider). But every try to resolve the error was a fail -.-’
Sorry for my bad english and thank you for any help XD
Any reason to init range slider with zero values of min, max, step? You shouldn’t do it. Init it with correct values
Yep, i have already used prepopulated values... but it do not work anyway :/
Uhm… i am so confused XD
Just now i have the div ( something like <div id=“price-filter”
class=“range-slider range-slider-init color-green”
data-label=“true”
data-min=“0”
data-max=“98.5”
data-step=“0.5”>) in the html view and
$$(’.range-slider’).on(‘range:change’, function (e, range) {
in $$(document).on(‘page:init’, ‘.page[data-name=“someName”]’, function (e) {
Is it the correct way? Should I listen for another page event? There is some better way to istanciate a range slider with dinamically populated values (I do not know values until i get a response from an ajax call)?
Thank you for any help
So strange nobody can help on this thing Everything work pretty well (very big app) the only 2 things i cannot put to work are the slider (but it is a very complicated view) and Vi.
I have tried another way too…
just a simple
<div class="range-slider range-slider-init color-green"></div> into the view and
var range = app.range.create({
el: ‘.range-slider’,
max: 100,
min: 0,
step: 1,
label: true,
value: 1,
});
under the page:init… and of course it do not want to work anyway. The slider is showed on page… and it do not work the first time (when it is istanciated) but it work then pretty well id someone leave the view and then reload the view.
Nobody can tell me if i am doing something wrong? I cannot believe something so simple can take so much time to be resolved (and anyway i was not able to resolve the problem)
Thank you
Hi. Provide a simple jsfiddle with the “error”
Hello pvtallulah,
sadly the “error” cannot be reproduced so easy. It only happen when the app is installed on a device and factually everything work in local while testing on a pc.
But i can post a fragment of the code … maybe my english is not helping at all to understand my problem 
$$(document).on('page:init', '.page[data-name="SomePageName"]', function (e) {
var range = app.range.create({
el: '.range-slider',
max: 100,
min: 1,
step: 1,
label: true,
value: 1,
});
app.request.promise.post(serverRestApi, {uID: userData['uID'], get: 'read', action: 'someAction', propertyID: somePropertyID}).then(function (data) {
var data = JSON.parse(data);
var max = data.onMarketStock;
range.max = data.value;
range.min = 0;
range.step = 0.5;
});
$$('.range-slider').on('range:change', function (e, range) {
$$('.price-value' + market['propertyID']).text((range.value)+'%');
});
});
this is the code js… the html one is:
<div data-name="buyProperty" class="page" style='background: white;'>
header etc. etc.
<div class="page-content" style="padding-bottom:93px;">
<div class="list simple-list" style="margin-bottom:10px;">
<ul>
<li class="item-row displayRangeSlider">
<div class="item-cell width-auto flex-shrink-0">
<i class="icon f7-icons ios-only">money_dollar</i>
<i class="icon material-icons md-only">attach_money</i>
</div>
<div class="item-cell item-cell-shrink-3">
<!-- Range Slider element -->
<div class="range-slider range-slider-init color-green">
</div>
</div>
<div class="item-cell width-auto flex-shrink-0">
<i class="icon f7-icons ios-only">money_dollar_fill</i>
<i class="icon material-icons md-only">monetization_on</i>
</div>
</li>
</ul>
</div>
</div>
</div>
So the error is just the “NaN” it show on range:change the first time the page is loaded… if the user return back and then load another time the page the slider work…but the first time it just show Nan as value. I do not think it is something related to html… and i cannot understand where i am failing o.o
the code up here is just one of many i have used in the past days to resolve the problem. I do not know… maybe i will use just a simple input range in the old fashion way XD But i was pretty curious to know how to resolve it … just as reference for the future even because the problem only show up on device… and not when testing locally.
Ok. If you want. You can provide a repo so i can download the code. Test it on my phone and write a solution. If i find one. You can also send me a PM with the repo if you dont want to share the full code.
Also. Can you remove range-slider-init class since you are manually creating it
app.request.promise.post(serverRestApi, {uID: userData['uID'], get: 'read', action: 'someAction', propertyID: somePropertyID}).then(function (data) {
var data = JSON.parse(data);
// INIT SLIDER HERE!
var range = app.range.create({
el: '.range-slider',
max: data.onMarketStock,
min: 0,
step: 0.5,
label: true,
value: data.value,
});
});
And remove range-init class from range slider!
Oh my … it work! XD
Thank you guys… even in 10 years I would think the error was to istanciate the slider inside the ajax call 
and not just at the start of the page:init event. I hope it will help some other noob like me in the future.
Thank you again 
Then after the page is loaded I can change the page and returning and every thing work fine… it only happen at the first load of the page.
and not just at the start of the page:init event. I hope it will help some other noob like me in the future.