范围 ui 滑块

Question

我在 ios 和 android 上查看范围 uislider 时遇到问题在使用 meteor 和 cordova 的应用程序中，我将在下面的视频中详细介绍。在浏览器中移动滑块时有效，但在 ios 和 android 中我无法想象获得的范围。

我有以下代码：尝试使用 jquery，因为您可以看到代码已被注释，但我没有得到结果

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

经过长时间的交谈和多次尝试，结果是点击事件，导致 noUiSlider 在移动设备上无法运行。

所以检查 noUiSlider events page 并将其放入一些反应变量中，我们得到以下代码运行:

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

并且 html 模板是：

 <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>

范围 ui 滑块

Range ui Slider

javascript

jquery

cordova

meteor

nouislider