自定义 jQuery UI 滑块高度和宽度

Posted 2023-03-06

【中文标题】自定义 jQuery UI 滑块高度和宽度

【英文标题】：Customizing jQuery UI Slider height & width

【发布时间】：2013-12-07 15:54:48

【问题描述】：

当自定义 jQuery UI 滑块（和手柄）的高度/宽度时，手柄现在会向左滑动太远（离开滑块）。有推荐的方法吗？

这里有一个小提琴来告诉你我的意思：http://jsfiddle.net/w7A4k/

我在API Documentation 中没有看到任何内容，我使用的是非常基本的设置：

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

【参考方案1】：

试试

fiddle demo

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

---

要将滑块放在栏内，请添加padding-left: 5px;

【讨论】：

@lhan16 欢迎 乐于助人 :)

您的示例向左移动多于向右移动（对于整个句柄宽度）

【参考方案2】：

JQuery UI Slider 的单位大小为em。因此滑块大小与其字体大小有关。

更改滑块 div 的字体大小以处理滑块 HEIGHT。 更改滑块的容器宽度以处理滑块宽度。

【参考方案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
    );
);