Javascript - Bootstrap-Slider, how to update variables according to the value of the slider

Question

Having implemented working sliders, I'm now confused as to how I could use the position of the slider to update other elements on the page. I figure that I need to create an event by adding some statements between these braces:

.on('slide', function(ev){

    });

I've put a little demo up on JSFiddle: DEMO

I would like the number above the slider to change as the slider is dragged and also for the sentence under the heading to change to a list of predefined sentences as the slider is dragged.

Thanks in advance, really appreciate any help that I could get :-)

Answer 1

Essentially you want to make your changes during the slide event, the anon function is the callback that happens on that event. The first argument to the anon function is the event which contains information you want from the slide widget.

http://jsfiddle.net/8E9M8/

    var i18n = {
        1: "My first position",
        2: "My second position",
        3: "My third position",
        4: "My forth position",
        5: "My fifth position",
        6: "My sixth position",
        7: "My seventh position",
        8: "My eight position",
        9: "My nineth position",  
        10: "My tenth position"
    };

    $(function(){
        $('#slider_surface').slider()
        .on('slide', function(ev){
             console.log(ev);
            $('.score_number h3').html(ev.value.toString());
            $('.score_text p').html(i18n[ev.value]);
        });
    });

Answer 2

Also you can create a change event controller like this

$('#slider_surface').slider({
    //Your slider configuration here
    range: "min",
    value: 0,
    min: 0,
    max: 10,
    step: 1,
    change: function(event, ui) {
        //Code to execute when the slider value changes
        console.log(ev);
        $('.score_number h3').html(ui.value);
        $('.score_text p').html(i18n[ui.value]);
        }       
    });