범위 ui 슬라이더

Question

ios 및 android에서 범위 uislider를 보는 데 문제가 있습니다. 유성 및 cordova가있는 응용 프로그램에서 다음 비디오에서 세부 사항을 남깁니다. 브라우저에서 슬라이더를 움직이면 작동하지만 ios와 android에서는 획득 한 범위를 시각화 할 수 없습니다.

나는 다음과 같은 코드를 가지고 : 당신이 코드가 주석 것을 알 수 있습니다 나는 결과

긴 채팅 많은 후

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

을하지 않았다으로 가 jQuery로 시도 noUiSlider가 모바일에서 작동하지 않게하는 click 이벤트로 밝혀졌습니다.

우리는 다음과 같은 코드를 실행 있어요 그래서 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>