Javascript - Bootstrap-Slider，如何根据滑块的值更新变量

Question

实现了工作滑块后，我现在很困惑我如何使用滑块的位置来更新页面上的其他元素。我想，我需要通过添加这些括号之间的一些语句来创建一个事件：

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

    }); 

我已经把一个小演示了有关的jsfiddle：DEMO

我想上面的滑块要改变的数字当滑块被拖动时，也会在拖动滑块时将该标题下的句子更改为预定义句子列表。

在此先感谢，非常感谢所有帮助，我能得到:-)

Answer 1

基本上你想要的幻灯片活动期间进行更改，在不久的功能是，在该事件发生回调。 anon函数的第一个参数是包含您想要从幻灯片小部件中获取的信息的事件。

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

您也可以创建变更事件控制器这样

$('#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]); 
     }  
    });