Range ui Slider

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);
  },
});

Your snippet is not running and it seems to be incomplete. Another thing is, that why do you put the slider function in the onRender method? — Jankapunkt
What is the suggestion? I just see you comment but do not recommend something like this to perform or help solve. — user7153292
How can I help when your example fails and you won't tell me, why you have put code in onRender? This is important because in onRender you can mess up things easily. I just try to understand and reproduce what you did. :-) — Jankapunkt
hey , Put in the render method to initialize when loading my DOM is the same as using documentReady, in onrendered does not work at all. The snipper should not work because it is not complete, it is an idea of what I have. As you can see this functional in chrome, but when simulated in ios or android does not work at all the reactive part does not display the data. — user7153292

Jankapunkt Jankapunkt · Accepted Answer · 2017-05-17T18:12:34

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>

Range ui Slider

1 Answers