英文:
How to Make noUiSlider Handle Overlap Another
问题
I have noUiSlider range slider with 3 handles, how to make one handle (in this example the blue handle in the center) can overlap another handle? I mean the blue handle movement is not limited by another handle position. Is that possible with noUiSlider?
我有一个带有3个手柄的noUiSlider范围滑块，如何使一个手柄（在这个示例中是中间的蓝色手柄）可以重叠另一个手柄？我的意思是蓝色手柄的移动不受另一个手柄位置的限制。这在noUiSlider中是否可能？
英文:
I have noUiSlider range slider with 3 handles, how to make one handle (in this example the blue handle in the center) can overlap another handle? I mean the blue handle movement is not limited by another handle position. Is that possible with noUiSlider?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: [30, 50, 75],
step: 1,
range: {
'min': 0,
'max': 100
},
connect: true,
handleAttributes: [{
'class': 'noUi-handle'
},
{
'class': 'noUi-handle center-post'
},
{
'class': 'noUi-handle'
}
],
});
<!-- language: lang-html -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
<div id="slider"></div>
<style>
.center-post {
background: #21A1FF;
border: 1px solid #21A1FF;
box-shadow: inset 0 0 1px #21A1FF,inset 0 1px 7px #21A1FF,0 3px 6px -3px #21A1FF;
}
</style>
<!-- end snippet -->
Thanks
答案1
得分: 1
要允许任何把手通过（例如不受限制），您可以传递 behaviour: 'unconstrained' 选项。例如：
var slider = document.getElementById("slider");
noUiSlider.create(slider, {
start: [30, 50, 75],
step: 1,
range: {
min: 0,
max: 100
},
connect: true,
behaviour: "unconstrained", // 添加
handleAttributes: [
{
class: "noUi-handle"
},
{
class: "noUi-handle center-post"
},
{
class: "noUi-handle"
}
]
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
<div id="slider"></div>
<style>
.center-post {
background: #21A1FF;
border: 1px solid #21A1FF;
box-shadow: inset 0 0 1px #21A1FF,inset 0 1px 7px #21A1FF,0 3px 6px -3px #21A1FF;
}
</style>
请注意，代码部分已经被忽略，只返回翻译好的内容。
英文:
To allow any handle to pass (e.g. not be limited by) other handles, you can pass the behaviour: 'unconstrained' option. For example:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
var slider = document.getElementById("slider");
noUiSlider.create(slider, {
start: [30, 50, 75],
step: 1,
range: {
min: 0,
max: 100
},
connect: true,
behaviour: "unconstrained", // Added
handleAttributes: [
{
class: "noUi-handle"
},
{
class: "noUi-handle center-post"
},
{
class: "noUi-handle"
}
]
});
<!-- language: lang-html -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
<div id="slider"></div>
<style>
.center-post {
background: #21A1FF;
border: 1px solid #21A1FF;
box-shadow: inset 0 0 1px #21A1FF,inset 0 1px 7px #21A1FF,0 3px 6px -3px #21A1FF;
}
</style>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论