0

我像这样动态创建我的 JQuery 滑块：

var slider = document.createElement("div");
        $(slider).slider({
            orientation: "vertical",
            range: "min",
        });

并为他分配一个类：$(slider).slider().addClass("dhSliderDesktop"); 我还覆盖了滑块手柄的一些设置，但无法使其适应它的轨道。我在做什么？你能帮忙吗...

CSS：

.dhSliderDesktop {
    position: absolute !important;
    right:9px !important;
    visibility:hidden;
    height: 100% !important;

    width:10px !important;
    color:green !important;
    background-color:red !important;
    background: blue !important;} 



.ui-slider .ui-slider-handle {

    width:40px !important;
    height:30px !important;

    left: -10.5px !important;
    border-style:none !important; 
    background-color: yellow !important;}

正如您在下图中看到的那样，滑块句柄正在脱离我不想要的内容窗口。如何解决这个问题？

在此处输入图像描述

4

3 回答 3

1

这是一个解决方案，它使用滑块小部件周围的包装器 div 作为帮助器来显示完整的蓝色滑块。实际的滑块在包装器内居中，我使用百分比值试图使功能独立于外部包装器大小（但这仍然需要一些 css 微调）：

.slider-wrapper {
    height: 100%;
    width: 10px;
    margin: 0;
    right: 10px;
    background: blue;
    border-radius: 3px;
    position:absolute;
}
.slider-wrapper-range-min {
    height: 10%;
    width: 100%;
    margin: 0;
    right: 0;
    bottom: 0;
    background: red;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    position:absolute;
}
.dhSliderDesktop {
    height: 80% !important;
    width: 100% !important;
    right: 0 !important;
    top: 10%;
    bottom: auto;
    border: none;
    background: blue !important;
    position: absolute;
} 

.ui-slider .ui-slider-handle {

    width:30px !important;
    height:24.5% !important;
    margin-bottom:-200%;
    margin-top: auto;

    left: -12px !important;
    background-color: yellow !important;
}

使用以下 jQuery 代码激活：

var $sliderWrapper = $('<div class="slider-wrapper"><div class="dhSliderDesktop"></div></div>');

$sliderWrapper
    .appendTo($(".wrapper"))
    .find(".dhSliderDesktop")
        .slider({
            orientation: "vertical",
            range: "min",
            change: function(event,ui) {
                console.log(ui.value);
            }
        })
        .end()
    .append( $('<div class="slider-wrapper-range-min"></div>') )
;

编辑：这是jsfiddle的更新链接

于 2013-03-05T14:08:21.350 回答
1

您需要做的就是玩： 

    ui-slider .ui-slider-handle {  
    width: 40px !important;  
    height: 30px !important;  
    left: -10.5px !important;  
    ..

如果您更改这些值，您将更改滑块的尺寸和位置。

于 2013-03-05T12:02:31.313 回答
0

一个更简单的解决方案是拦截滑块更改事件并根据需要调整处理程序的位置示例代码：

  $("#Slider1").slider({
          change: function (event, ui) {
            var TempID = $(this).attr('id');
            var LeftVal = $("#" + TempID).find("a").css("left"); 
            if (LeftVal == "500px") $("#" + TempID).find("a").css("left", "485px");
        }
    });

上面的代码假设您的滑块宽度为 500 像素，处理程序图像为 30 像素。我们从 hanlder left css 样式中减去了 15px。

于 2013-08-22T18:10:18.587 回答