自定義jQuery UI Slider的高度和寬度

Question

現在，自定義jQuery UI Slider（和手柄）的高度/寬度時，手柄將向左滑動太遠（離開滑塊）。 有推薦的方法來做到這一點嗎？

這是一個小提琴，向您展示我的意思： http : //jsfiddle.net/w7A4k/

我沒有在API文檔中看到任何內容，並且使用的是非常基本的設置：

$("#slider").slider({
    orientation: "horizontal",
    max: 100,
    min: 0
});

Answer 1

嘗試

小提琴演示

.ui-slider .ui-slider-handle {
    height: 15px;
    width: 5px;
    padding-left: 5px; //add this
}

---

要將滑塊放置在欄中，請添加padding-left: 5px;

Answer 2

JQuery UI Slider的單位大小以em 。 因此，滑塊大小與其字體大小有關。

• 更改滑塊div的字體大小以處理滑塊HEIGHT。
• 更改滑塊的容器寬度以處理滑塊WIDTH。

Answer 3

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