Adding a secondary element to show where user has dragged slider to in JQuery UI -
using normal implementation of jquery ui slider code:
$(function() { $('.slider').slider(); });
jquery ui creates surrounding slidable area, , handle drag. have experience extending add secondary element shows user has dragged to? want achieve have 2 colour draggable area, either side of handle.
you can add divs in slider , update size on slide
event. this:
$('.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())
.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; }
<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>
Comments
Post a Comment