范围ui滑块

Question

I have problems viewing the range uislider on ios and android In an application with meteor and cordova, in the following video I leave to the detail. When moving the slider in the browser works but in ios and android I can not visualize the ranges obtained.

I have the following code: Try with jquery as you can see that the code is commented and I did not get results

 Template.range.onRendered(function () { $(function () { $('#slider-edad').noUiSlider({ start: [18, 30], step: 1, range: { 'min': 18, 'max': 60 } }); }); $(function () { $('#range').noUiSlider({ start: [10], step: 2, range: { 'min': 10, 'max': 100 } }); }); // km(); }); function km(instance) { // $('.km-range').html(''); // Session.set("Kilometros", ''); var d1 = $('#range').val(); var d0r = parseInt(d1); console.log('Kilometros: ', d0r); instance.km1.set(d0r); // Session.set("Kilometros", d0r); // $('.km-range').html(d0r, 'Km'); } Template.range.events({ 'click #range': function (event, instance) { console.log('click'); km(instance); }, }); 

Answer 1

After a long chat and many tries it turned out to be the click event, that makes the noUiSlider not work on mobile.

So checking on the noUiSlider events page and putting this into some reactive variables we got the following code running:

import { Template } from 'meteor/templating';
import { ReactiveDict } from 'meteor/reactive-dict';

//import template html file

Template.findme.onCreated(function (){
    this.state = new ReactiveDict();

    // set start values
    this.state.set("km", 10);
    this.state.set("agemin", 18);
    this.state.set("agemax", 30);
});


Template.findme.onRendered(function() {

    if (!this._rendered) {
        this._rendered = true;


        // create slider
        $('#slider-edad').noUiSlider({
            start: [ 18, 30 ],
            step: 1,
            range: {
                'min': 18,
                'max': 60
            }
        })

        $('#range').noUiSlider({
            start: [ 10 ],
            step: 2,
            range: {
                'min': 10,
                'max': 100
            }
        });
    }

});

Template.findme.helpers({
    KilosM: function(){
        return Template.instance().state.get("km");
    },

    agemin: function(){
        return Template.instance().state.get("agemin");
    },

    agemax: function(){
        return Template.instance().state.get("agemax");
    },
});


Template.findme.events({
   'slide #slider-edad':function(event,instance) {
       var d2= $('#slider-edad').val()
       var d0 = parseInt(d2[0]);
       var d1 = parseInt(d2[1]);
       console.log(d0,d1);
       instance.state.set("agemin", d0);
       instance.state.set("agemax", d1);
   } ,

    'slide #range': function(event , instance) {
        var d1= $('#range').val();
        var d0r = parseInt(d1);
        console.log('Kilometros: ',d0r);
        instance.state.set("km", d0r);
    },
});

and the html template being:

 <div class="">
    <span class="edad-range0">{{agemin}}</span>
    <span class="edad-title"> Age </span>
    <span class="edad-range1">{{agemax}}</span><br>
    <div id="slider-edad"></div><br><br>
  </div>