[英]Range issue with ui-slider
I'm trying to set up a range with a slider. 我正在尝试使用滑块设置范围。 I would prefer if both cursors did not overlap in the same value. 我希望两个光标的重叠度不相同。 In other words, how do I get the sliders to freeze and stay put when the minimum value slider and the maximum value slider come next to each other. 换句话说,当最小值滑块和最大值滑块彼此相邻时,如何使滑块冻结并保持原状。 Any ideas? 有任何想法吗? Thank you in advance. 先感谢您。
I was searching for a solution to this when doing custom-styled slider yesterday. 昨天做自定义样式的滑块时,我正在寻找解决方案。
Nothing worked from what I found, then I came up with an easy one myself: 从我发现的结果中什么都没有,然后我自己想出了一个简单的方法:
1.Put the slider into container div with left and right padding 1.使用左侧和右侧填充将滑块放入容器div
<div class="slider-container">
<div class="slider-main ..."></div>
</div>
2.Set the styles of 2.设置样式
-container (left and right padding to half slider-handle width) slider -容器(左右边缘填充到一半的滑块-手柄宽度)滑块
-handle (left-margin to minus half of its width) -句柄(左边距减去宽度的一半)
Something like this (im writing from memory) 这样的事情(我从内存中写)
<style>
.slider-container {
padding-left: 8px;
padding-right: 8px;
}
.slider-handle {
width: 16px;
margin-left: -8px;
}
</style>
You should also remove styling from slider-main and move it from there to slider-container 您还应该从slider-main中删除样式并将其从那里移到slider-container
Returning false from the slide function when they're about to collide seems to work: http://jsbin.com/eyoge3/3 当它们即将发生冲突时,从slide函数返回false似乎可行: http : //jsbin.com/eyoge3/3
Code from the jsbin: 来自jsbin的代码:
slide: function(event, ui) {
var oldMin = $("#slider").slider("values", 0);
var oldMax = $("#slider").slider("values", 1);
var newMin = ui.values[0];
var newMax = ui.values[1];
if( oldMin != newMin && newMin == oldMax )
return false;
else if( oldMax != newMax && newMax == oldMin )
return false;
}
I needed something similar so I've written an extension over existing jQuery UI slider plugin/widget. 我需要类似的东西,所以我编写了现有jQuery UI滑块插件/小部件的扩展。 These are additional options that this extension supports: 这些是该扩展程序支持的其他选项:
You can get the code on my blog (it gets updated so I'm not publishing it here directly). 您可以在我的博客上获取代码 ( 该代码已更新,因此我不会直接在此处发布)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.