添加辅助元素以显示用户在JQuery UI中拖动滑块的位置

Question

使用此代码使用JQuery UI滑块的常规实现：

$(function() {
  $('.slider').slider();
});

JQuery UI只创建周围的可滑动区域，然后拖动手柄。有没有人有经验扩展这个添加一个次要元素，显示用户拖动到哪里？我想要实现的是在手柄的两侧都有一个双色可拖动区域。

Answer 1

您可以在滑块中添加div，并在slide事件中更新其大小。像这样：

＆＃13;

＆＃13;

$('.slider').slider({
    max: 100,
    min: 0,
    slide: function (e, ui) {
        $('.left-side').css('width', $(ui.handle).position().left)
        $('.right-side').css('width', $(e.target).width() - $(ui.handle).position().left)

    }
});

$('.left-side').css('width', '0px');
$('.right-side').css('width', $('.slider').width())

＆＃13;

.slider div {
    position: relative;
     height: 100%;
}


.left-side {
    background-color: aliceblue;
    left: 0px;
    width: 200px;
    float: left;
}


.right-side {
    background-color: bisque;
     width:200px;
    float: left;
}

＆＃13;

<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class='slider'>
    <div class="left-side"></div>
    <div class="right-side"></div>
</div>

＆＃13;

＆＃13;

＆＃13;