jQuery UIスライダハンドルが外に出る

私はそれを完璧にスタイルできましたが、コンテナ内に収めることは難題でした。マージン左の修正は私にとってはうまくいかないようです。ここでjQuery UIスライダハンドルが外に出る

2011-10-20 Talasan Nicholson

あなたは、レイアウトを変更する代わりにJQUIクラスを使用します..しかし、そのかなりトリッキー必要がありますウィジェットはCSSを考慮に入れているので、（ –

http://jsfiddle.net/Erugp/29/同じもの。 –

http://jsfiddle.net/Erugp/31/それを中心にかなりハードコンテナの中に入れてください：/ –

問題はjqueryのUIのスライダーは、スライダーをアニメーション化する相対値で左のCSSプロパティを使用していることです。これは、ハンドルの左端をスライダの左端から他端の端までスライドさせてオーバーフローさせることを意味します。解決策の1つは、スライダdivを小さくしてスタイリングを保持する別のdivにラップすることです。外側div幅=スライダ幅+ハンドルdiv。

CSSのサイズとマージンが少し変わった後、それは私のために働いた。

出典

2011-12-18 11:28:36

私が気づいた唯一のことは、スライダーが自動的にスライドしません。これは、スライダのdivではなく、ラッパーをクリックしているためです。しかしそれほど大きな影響はないかもしれませんが、あなたはまだその面に向かってスライドできます。 –

Mihaiが言ったことの上に、ラッピングdivにパディングを追加してハンドルを中央に移動させました。 – user1786317

これに対する解決策は次のとおりです。何もラップする必要はありません。ハンドルの左余白を幅の1/2の負の値に設定するだけです。それはJavaScriptを使用してhttp://bugs.jqueryui.com/ticket/3893

出典

2013-10-03 14:46:24

これは間違いなく改善され、非常に簡単な修正です！それはすべて簡単です。 –

修正：

var $Slide = jQuery('#StatusSlide'); 
$Slide.slider({ 
    slide: function(event, ui) { 
    /* Fix handler to be inside of slider borders */ 
    var $Handle = $Slide.find('.ui-slider-handle'); 
    $Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value')/$Slide.slider('option', 'max'))); 
    } 
}); 
/* Fix handler to be inside of slider borders */ 
var $Handle = $Slide.find('.ui-slider-handle'); 
$Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value')/$Slide.slider('option', 'max')));

そして、ここでは固定あなたのフィドルです：で説明したようにhttp://jsfiddle.net/he04hqg3/

出典

2014-10-19 14:09:24 brubla

これは、スライダの種類を不安定にし、マウスに直線的に追従しません。 – kjprice

jQuery UIスライダハンドルが外に出る

答えて

関連する問題