jQueryスライダのノブに現在のスライダの値を表示する方法は？

Question

jQueryの例​​から、スライダーの現在の値をスライダー・ノブに表示されるテキストとして設定できるかどうかを調べようとしています。

ユーザがスライダを変更すると、スライダノブの表面にテキストとしてリアルタイムで表示される数値として、新しい値が継続的に更新されます。

$(document).ready(function() { 
    $("#slider").slider(); 
    }); 

    <div id="slider"></div> 

これを行う方法はありますか？

Answer 1

はちょうどあなたの例のように、あなたのスライダが「スライダー」と呼ばれているとしましょう：

<div id="slider" class="slider"></div> 

次に、このdivの内側に、ノブを表して生成されたリンクタグ（A）があります。 あなたがそのような何かを試すことができるように：

$(document).ready(function() { 
    $("#slider").slider(
    slide: function(event, ui){ 
     $("#slider").find(a:first).text(ui.value); 
    } 
); 
}); 

これは滑りながらノブを現在の値を書き込む必要があります。 あなたが今やっておかなければならないことは、CSSを使ってノブをフォーマットすることです。

これが少し助けてくれることを願っています。

Answer 2

@ EvilMMの答えはほぼ正しいですが、引用符を忘れてしまいました。私はスライダーの値が-1であることも経験しましたので、私はそれを修正しました。

<div id="slider"></div> 

JS：

$("#slider").slider({ 
    max: 10, 
    slide: function (event, ui) { 
     m_val = ui.value; 
     if (m_val < 0) { 
      m_val = 0; 
      $(this).slider({ value: 0 }); 
     } 
     $(this).find("a:first").text(m_val); 
    } 
}); 

Answer 3

あなたはjqueryのUI

完了

$(function(){ 
var slider = $('#slider1').bxSlider({  
    onBeforeSlide: function(currentSlide, totalSlides){ 
     alert(currentSlide); 
    }  
}); 

を使用している場合は！