web-dev-qa-db-ja.com

jQueryUIスライダーの高さと幅のカスタマイズ

JQuery UIスライダー（およびハンドル）の高さ/幅をカスタマイズすると、ハンドルが左にスライドしすぎます（スライダーから外れます）。これを行うための推奨される方法はありますか？

これが私が何を意味するかを示すためのフィドルです： http://jsfiddle.net/w7A4k/

APIドキュメント には何も表示されませんでした。非常に基本的な設定を使用しています。

$("#slider").slider({
    orientation: "horizontal",
    max: 100,
    min: 0
});
jquerycssjquery-uislider
9
lhan

JQueryUIスライダーのユニットサイズはemです。したがって、スライダーのサイズはフォントサイズを基準にしています。

  • スライダーの高さを処理するようにスライダーdivのフォントサイズを変更します。
  • スライダーのコンテナ幅を変更して、スライダーの幅を処理します。
0
Rashid
$(document).ready(function() {   
    function home_page_banner_height(selector) {   
        var wind_widht = $( window ).width();   
        var req_height = ( (banner_height / banner_width) * 100 );   
        //banner_height is height of item div of carousel and banner_width is width of item div of caousel 

        var calculate_height = (wind_widht / 100) * req_height;
        $('.v_center_con .v_center_inner').height(calculate_height);     
        $(selector).height(calculate_height);     
    }

    home_page_banner_height('.banner_con .item');     

    $(window).resize(function() {     
        home_page_banner_height('.banner_con .item');           
        //this function will make your slider responsive for all screen sizes
    });
});
0
Ahsan