2011-08-22 7 views
6

私は0〜100であるスライダーを希望するが、それは着色領域表示値とは無関係に値を制限するjavascript(jquery)スライダがありますか?

に入ることを制限さスライダーで、

(例えば)の例を見ては、このようなものになるだろう0-75からのみ選択可能です

Sample limited slider

明らかに私は、私の知る限りjqueryのUIスライダーはこれを許可していません見ることができるように... MAX、MIN、リミットとスライダーの値を設定できるように

をしたいと思いますボックスの。私はそれが基本的な行動を拡張することが可能だと思うが、私はその仕事をするために非常に明確な手を保持する必要があります!

答えて

9

スライド中にマウスが動くたびにトリガされるスライダプラグインのイベントslideを使用できます。 ui.valueを使用して現在のハンドルの値を取得し、最大制限を確認してfalseを返します。このコールバックからfalseを返すと、スライドが防止されます。

$(".selector").slider({ 
    slide: function(event, ui) { 
     if(ui.value > 75){//Note the value of ui.value is between 0 to 99 
      return false; 
     } 
    } 
}); 

スライダーの背景色は、CSSで簡単に達成できます。

関連する問題