How do I initialize mutliple instances of the No UI Slider in Meteor? I'd like to have multiple sliders on a page.
I've been trying with...
Template:
<input type="checkbox" checked="{{checked}}" class="toggle-checked" />
<span class="example-val" name="body" id="range{{this._id}}"></span>
JS:
Template.task.rendered = function() {
$('#slider'+this._id).noUiSlider({
start: 5,
connect: "lower",
step: 0,
format: wNumb({
decimals: 0,
}),
range: {
'min': 0,
'max': 10
}
});
$('#slider'+this._id).Link('lower').to($('#range'+this._id));
};
Calling this._id isn't going to do anything... Somehow it needs to run through all post IDs until there's a match, like doing Tasks.findOne(); and comparing to whats in the DOM.
If there is a better way of doing this... please let me know!
EDIT:
I updated my code to this, following the structure of other instances where plugins are intialized multiple times on the same page like this, making use of $this and .each
template:
<div class="slider"></div>
<span class="example-val range" name="body"></span>
JS:
Template.task.rendered = function() {
$('.slider').each(function() {
var $this = $(this);
$this.noUiSlider({
start: 5,
connect: "lower",
step: 0,
format: wNumb({
decimals: 0,
}),
range: {
'min': 0,
'max': 10
}
});
$this.Link('lower').to($('.range'));
});
};
In the console, this gives me the error, "Error: Slider was already initialized."
I needed to put 'this' in the right place...
Taking a look at RateIt a plugin with a similar usage helped me to figure it out.