Meteor JQuery and 'slider' function

Question

I am trying to create a slider in my meteor app between 0 and 1 with step 0.001 and I don't want the slider to have a default value and I do not want to show the handle of the slider until the user decides on a value. I am new to Meteor and web development in general so I copied some code and I have been editing it to fit my context.

My JS file looks like this

Template.game_task.onCreated(()=>{
    if (!Session.get("sliderValue")){
        Session.setPersistent('sliderValue', -1)
    }

});

Template.game_task.onRendered(()=> {

    /////// the slider stuff //////
    $("#slider").slider({
        min: 0,
        max: 1,
        step: 0.01,
        slide: function(event, ui) {
            $('#slider > .ui-slider-handle').show();
            Session.setPersistent('sliderValue',ui.value)
        },
        change: function(event, ui) {
            //save value to collection
        }
    });

    $('#slider > .ui-slider-handle').hide();


});

Then my HTML file

<template name="game_task">
    <div id="slider"></div>
    <span id="min">0</span>
    <span class="quarter">0.25</span>
    <span class="quarter">0.5</span>
    <span class="quarter">0.75</span>
    <span id="max">1</span>
    <input name="guess" id="guess" value="-1" hidden />
</template>

However, I get the following error:

Exception from Tracker afterFlush function:
meteor.js?hash=6d285d84547b3dad9717a7c89c664b61b45ea3d8:942 TypeError: $(...).slider is not a function
    at Blaze.TemplateInstance.

It seems that I don't have the .slider(..) function? Although I have JQuery in my meteor packages (it comes by default).

Answer 1

slider is part of jquery-ui which is not packaged with Meteor by default afaik. You might try mizzao:jquery