我正在尝试使我的滑块可拖动，例如，如果我有 3 个选项：
o---|---o---||---o
我希望滑块手柄捕捉到最接近的可能选项，例如，您在 | 之间释放鼠标键 & || 在上面的例子中，它应该自动转到中间的“o”。所以，更别说之前有没有在任何地方发布过 | , 如果在 || 之后释放，它会转到第一个“o”和最后一个“o”。我编写了一个代码，并将 jQuery UI Draggable 添加到滑块，但我很难找到一个解决方案让它捕捉到最接近的选项。
请注意，选项是动态的，因此它可以是任意数字：
o---|---o
o---|---o---||---o---|||---o---||||---o
这就是我写的只为两个选项做同样的事情：
///slider Stuff
$(function() {
var select = $( "#select" );
var $max = $('#select').find('option').length;
if ($max > 1){
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
max: $max,
step:1,
animate: 'true',
range: "min",
value: select[ 0 ].selectedIndex + 1,
slide: function(event, ui) {
$('#select').trigger('change'); ///trigger change event for the dropdown menu.
select[ 0 ].selectedIndex = ui.value - 1;
}
});
//Draggable Stuff
$("#slider .ui-slider-handle").draggable({
animate: true,
step: 1,
axis: "x",
containment: "parent",
});
////Making the draggable function work if mouse is released outside of the handle by adding mouseup event to body
$("#slider .ui-slider-handle").mousedown(function(){
$('body').one('mouseup', function() {
var sliderleft = $('#wwslider .ui-slider-handle').css('left').replace(/[^-\d\.]/g, '');
///here I tried to get the percentage of slider's position
$sliderwidth = $("#slider").css('width').replace(/[^-\d\.]/g, '');;
$sliderleft = $("#slider .ui-slider-handle").css('left').replace(/[^-\d\.]/g, '');;
$max = $('#select').find('option').length;
$selectvalue = $('#select').val();
$slidervalue = $("#slider").slider('value');
$sliderpercent = ($sliderleft/$sliderwidth)*100;
console.log($sliderpercent);
///Okay, here is what I did for two options, If it is released at some percent lower than a certain amount, set value to 1, else set it to two, But now I want to be able to do it automatically with any number of options.
if($sliderpercent <= 33.3) {
$("#slider").slider('value',1);
$('#select').trigger('change');
}
else {
$("#slider").slider('value',2);
$('#select').trigger('change');
}
});
});
//Draggable
$( "#select" ).change(function() {
slider.slider( "value", this.selectedIndex + 1 );
var $currentscs = $('#select').find(":selected").text();
$('#holder li').fadeOut('fast');
$('#holder li[data-scs-id*='+$currentscs+']').fadeIn('fast');
});
}
});
为了更好地理解，这里是小提琴
正如您在小提琴中看到的，如果您从下拉列表中选择一个选项，一切都很完美，显示相应的 li 并且滑块移动到正确的位置 ，如果您移动滑块，我想要的是让它也与滑块一起使用，我希望在下拉列表中选择最接近滑块释放点的值。希望它足够清楚。对此的任何帮助将不胜感激。
更新：
如需更多说明，请查看绑定到“”的 jQuery UI 滑块的默认功能<Select>。我想我想要的已经在那里了，我只需要一些帮助来弄清楚如何使用它：如您所见，当您单击选项 2 附近的某个位置时，它会转到选项 2 并在下拉列表中选择它，如果您单击滑块，它转到最近的选项，我希望拖动时发生同样的事情，所以当你拖动滑块时，当你释放它时，滑块应该转到离释放点最近的选项。