Question

我动态创建我的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;}

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

enter image description here

Answer 1

您需要做的就是玩：

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

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

Answer 2

这是一个解决方案，它使用滑块小部件周围的包装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>') )
;

修改：这是更新后的link to jsfiddle

Answer 3

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

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

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

滑块处理内容不足

3 个答案: