Get value from jQuery slider while it's moving

Question

I'm trying to use this supposedly simple example on how to create a Backbone.js app. The goal is to use a jQuery slider to dynamically update a couple fields on the page.

Right now, though, this only works when the slider stops moving and the event handler reports the position/value. I would like to get the value from the slider while it moves similar to how the mobile slider appears to function.

First time using Backbone and I think I've exhausted the documentation on the jQuery slider. Any hints/tips/suggestions greatly welcome.

Backbone app

$(document).ready(function () {
    // Initialize jquery slider
    $("#slider").slider({
        value: 0,
        step: 1
    });

    // Create the model class via Backbone (which sets up things like prototype objects correctly). 
    // This particular model is a very simple one. It'll have just 1 attribute - "slidervalue"
    var SliderModel = Backbone.Model.extend({});

    // A "View" abstraction for the slider.
    // Whenever the slider position changes, this view updates the model with the new value.
    var SliderView = Backbone.View.extend({
        el: $("#slider"), // Specifies the DOM element which this view handles

        events: {
            // Call the event handler "updateVal" when slider value changes.
            // 'slidechange' is the jquery slider widget's event type. 
            // Refer http://jqueryui.com/demos/slider/#default for information about 'slidechange'.
            "slidechange": "updateVal",
        },

        updateVal: function () {
            // Get slider value and set it in model using model's 'set' method.
            console.log('SliderView.updateVal');
            console.log(this.$el.slider('value'));
            var val = this.$el.slider("option", "value");
            this.model.set({ slidervalue: val });
        }
    });

    // The listener "View" for the model.
    // Whenever the model's slidervalue attribute changes, this view receives the updated value.
    var ValueView = Backbone.View.extend({
        initialize: function (args) {
            // _.bindAll is provided by underscore.js. 
            // Due to some javascript quirks, event handlers which are bound receive a 'this' 
            // value which is "useless" (according to underscore's docs).
            // _.bindAll is a hack that ensures that 'this' in event handler refers to this view.
            _.bindAll(this, 'updateValue');


            console.log('ValueView.initialize');

            // Bind an event handler to receive updates from the model whenever its
            // 'slidervalue' attribute changes.
            this.model.bind('change:slidervalue', this.updateValue);
            console.log(this);
        },

        updateValue: function () {

            // Get the slider value from model, and display it in textbox.
            console.log('ValueView.updateValue');

            // this.model won't work unless "_.bindAll(this, ...)" has been called in initialize
            var value = this.model.get('slidervalue');
            console.log(value);
            $("#sliderVal").val(value);
        }
    });

    // Create the instances
    var sliderModel = new SliderModel;
    var sliderView = new SliderView({ model: sliderModel });
    var valView = new ValueView({ model: sliderModel });
});

HTML

    <!-- "slider" is a jquery slider -->
    <div id="slider"></div>

    <!-- "sliderVal" displays the slider's position. It receives the value via model. -->
    <input type="text" id="sliderVal" value="0"/>

EDIT

Forgot to mention that I made an attempt to add the slide event to the events in my Backbone view like so (was not able to see any results so probably using the wrong syntax?)

    events: {
        // Call the event handler "updateVal" when slider value changes.
        // 'slidechange' is the jquery slider widget's event type. 
        // Refer http://jqueryui.com/demos/slider/#default for information about 'slidechange'.
        "slideslide": "updateVal, ui",
    },

Answer 1

FYI a useful syntax for troubleshooting this thing in the future is to just log out all events to see what event is actually firing.

So you can say something along the lines of:

events: {
  "all": "log"
}

log: function(e) {
  console.log e;
}

Answer 2

Figured out the syntax. Posted below:

    events: {
        // Call the event handler "updateVal" when slider value changes.
        // 'slidechange' is the jquery slider widget's event type. 
        // Refer http://jqueryui.com/demos/slider/#default for information about 'slidechange'.
        "slide": "updateVal",
    },