正文 

当前位置： 首页 > 问答 >

如何限制 jQuery UI 滑块的范围？

     2023-05-08     41

关键词：

【中文标题】如何限制 jQuery UI 滑块的范围？【英文标题】：How can I restrict the range of a jQuery UI slider? 【发布时间】：2017-04-19 03:17:32 【问题描述】：

我创建了一个 jQuery UI 滑块，它的 range 设置为 true，并且在 0 和 4 处有两个句柄。我想将这些句柄的范围限制在最大4。这意味着当用户滑动其中一个手柄并且其他手柄的位置使范围超出 4 时，另一个手柄应滑动以保持范围为 4，但如果范围小于 4，则不应滑动.

这意味着如果ui.values[0] 等于0 并且用户将另一个手柄滑动到10，那么这个手柄应该随之滑动到6。 但是，如果ui.values[0] 等于2 并且用户将另一个手柄滑动到4，那么它应该保持在原来的位置。

一些示例值集是：

    1 到 5 0 到 4 0 到 2 16 到 19

我创建了一个 JSFiddle 来试试这个：https://jsfiddle.net/j4hd760f/

来自 JSFiddle 的代码作为 sn-p： 

$('.slider').slider(
    range: true,
    values: [0, 4],
    slide: function (ev, ui) 
        var ui1 = ui.values[0];
        var ui2 = ui.values[1];
        $('.slider').not(this).each(function () 
            total += $(this).slider('value');
        )
        $('#total').text(ui1 + " " + ui2);
    
);
.slider 
    margin: 16px;
    width: 200px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<div id="slider1" class="slider"></div>
<div id="total"></div>

【问题讨论】：

【参考方案1】：

jQuery UI Sliders 中没有特定设置可以直接完成您想要的。因此，您将需要在 slide 处理程序中执行此操作的代码。

下面的代码将完成您想要的。但是，我将最大允许差异更改为 20 而不是 4，因为 4 在 200 像素宽的滑块上不可见。您可以通过设置sliderMaxDifference 轻松更改此最大差异。如果您真的想要 4，则在此答案的末尾附近包含另一个 sn-p。

var sliderMaxDifference = 20;
var timeout;
$('.slider').slider(
    range: true,
    values: [0, 4],
    slide: function (ev, ui) 
        var movedValue = ui.value;
        //ui.handleIndex does not exist in this version of jQuery UI
        //Determine which slider moved
        var handleIndex = 1;
        if(ui.handle.nextSibling && ui.handle.nextSibling.nodeName === 'A')
            handleIndex = 0;
        
        var unmovedValue = ui.values[1 - handleIndex];
        //Compute the new value for the unmoved slider
        unmovedValue = Math.max(unmovedValue,movedValue - sliderMaxDifference);
        unmovedValue = Math.min(unmovedValue,movedValue + sliderMaxDifference);
        //Set the following slider value
        $(this).slider('values',1 - handleIndex, unmovedValue);
        //$(this).slider('values') will not yet reflect the new values
        //var newValues=$(this).slider('values');
        var newValues=[]
        newValues[handleIndex] = movedValue;
        newValues[1 - handleIndex] = unmovedValue;
        $('#total').text(newValues[0] + "-->" + newValues[1] 
                         + ' Difference=' + (newValues[1]-newValues[0]));
    
);
.slider 
    margin: 16px;
    width: 200px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<div id="slider1" class="slider"></div>
<div id="total"></div>

需要注意的是，jQuery UI 滑块不允许较低的滑块变得比较高的滑块大。当滑块相等时，这会导致一些 UI 混乱。您必须将最近移动的滑块从另一个滑块上移开，以便抓住另一个滑块来移动它。

我删除了你的代码：

$('.slider').not(this).each(function () 
    total += $(this).slider('value');
)

因为它似乎什么也没做（total 从未被声明或以其他方式使用过）。

如果你真的想要相差4，那么你可以试试下面的sn-p（只改了：var sliderMaxDifference = 4;）：

var sliderMaxDifference = 4;
var timeout;
$('.slider').slider(
    range: true,
    values: [0, 4],
    slide: function (ev, ui) 
        var movedValue = ui.value;
        //ui.handleIndex does not exist in this version of jQuery UI
        //Determine which slider moved
        var handleIndex = 1;
        if(ui.handle.nextSibling && ui.handle.nextSibling.nodeName === 'A')
            handleIndex = 0;
        
        var unmovedValue = ui.values[1 - handleIndex];
        //Compute the new value for the unmoved slider
        unmovedValue = Math.max(unmovedValue,movedValue - sliderMaxDifference);
        unmovedValue = Math.min(unmovedValue,movedValue + sliderMaxDifference);
        //Set the following slider value
        $(this).slider('values',1 - handleIndex, unmovedValue);
        //$(this).slider('values') will not yet reflect the new values
        //var newValues=$(this).slider('values');
        var newValues=[]
        newValues[handleIndex] = movedValue;
        newValues[1 - handleIndex] = unmovedValue;
        $('#total').text(newValues[0] + "-->" + newValues[1] 
                         + ' Difference=' + (newValues[1]-newValues[0]));
    
);
.slider 
    margin: 16px;
    width: 200px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<div id="slider1" class="slider"></div>
<div id="total"></div>

更通用的解决方案是使用滑块上的属性来存储该特定滑块允许的差异。

【讨论】：

【参考方案2】：

作为对 Mayken 回答的补充，jQuery UI 在某些时候将滑块句柄元素从“A”更改为“span”。

要在最新版本的 jQuery 中工作的答案，请更改：

if(ui.handle.nextSibling &amp;&amp; ui.handle.nextSibling.nodeName === 'A')

到

if(ui.handle.nextSibling &amp;&amp; ui.handle.nextSibling.nodeName === 'SPAN')

【讨论】：

将jquery滑块限制为另一个滑块的值(代码片段)

...：http://jqueryui.com/demos/slider/#rangemin我需要根据另一个的值限制一个，以便它们不重叠。我想出了下面的代码。除了一个非常令人讨厌的问题之外，它还有效-当我拖动滑块时，当我还在拖动它们时它们会经过另一个滑块，只有在... 查看详情

JQuery UI 范围滑块值

】JQueryUI范围滑块值【英文标题】：JQueryUIRangeSlidervalues【发布时间】：2021-10-0605:07:02【问题描述】：我正在使用JQueryUIRange滑块。我有自定义css，我为我的范围从89到98编写了一些JS，并在我的滑块的句柄上显示新值。如果我将左... 查看详情

如何使范围滑块的左侧与滑块右侧的颜色不同？

】如何使范围滑块的左侧与滑块右侧的颜色不同？【英文标题】：Howtomaketheleftsideofarangeslideradifferentcolorthantherightsideoftheslider?【发布时间】：2019-05-1220:11:21【问题描述】：查找有关如何根据可拖动部分的哪一侧更改滑块颜色的信... 查看详情

jquery ui滑块-如何反转范围选择

】jqueryui滑块-如何反转范围选择【英文标题】：jqueryuislider--howtoinverttherangeselection【发布时间】：2012-01-2909:19:31【问题描述】：我有一个有点奇怪的请求，允许用户选择滑块上的范围，但允许他们反转滑块上的范围选择。例如，... 查看详情

根据第一个滑块状态动态设置 jQuery UI 中滑块的最大值

...irstsliderstate【发布时间】：2018-06-2906:35:10【问题描述】：如何根据第一个滑块#slider1的状态设置第二个滑块#slider2max的值？$("#slider1").slider(value:100,min:0,max:500,ste 查看详情

如何在 jQuery UI 中创建多范围时间滑块

】如何在jQueryUI中创建多范围时间滑块【英文标题】：HowtocreatemultirangetimesliderinjQueryUI【发布时间】：2014-07-3102:23:45【问题描述】：我正在使用JQueryUI时间滑块。我想获得具有多个句柄的多个范围。如下所示：起点10:00AM--Range---2:00... 查看详情

根据 jQuery UI 滑块的位置和值更新其他值

】根据jQueryUI滑块的位置和值更新其他值【英文标题】：UpdateothervaluesbasedonpositionandvalueofjQueryUIslider【发布时间】：2017-08-3023:11:24【问题描述】：我正在使用jQuery构建一个基本的抵押贷款计算器，需要显示一些值，这些值会根据... 查看详情

基于 *multiple* jQuery UI 滑块的 jQuery 显示/隐藏元素

】基于*multiple*jQueryUI滑块的jQuery显示/隐藏元素【英文标题】：jQueryshow/hideelementsbasedon*multiple*jQueryUIsliders【发布时间】：2013-12-2402:43:16【问题描述】：我正在尝试创建航空公司风格的时间过滤器。我有一系列“徽章”，每一个都... 查看详情

如何限制滑块的值更改事件？

】如何限制滑块的值更改事件？【英文标题】：HowdoIthrottleaslider\'svaluechangeevent?【发布时间】：2011-11-2103:35:01【问题描述】：我有一个滑块，它在值更改时会强制进行相当严重的计算，所以我想在用户完成滑动后例如50毫秒过去... 查看详情

如何在angularjs中设置范围滑块的时间？

】如何在angularjs中设置范围滑块的时间？【英文标题】：Howtosettimeinrangsliderinangularjs?【发布时间】：2017-10-0320:37:59【问题描述】：我在Angularjs中使用具有可拖动范围（https://jsfiddle.net/ValentinH/954eve2L/）的滑块进行时间选择。我想... 查看详情

jQuery UI Slider - 最大值（不是滑块的结尾）

】jQueryUISlider-最大值（不是滑块的结尾）【英文标题】：jQueryUISlider-maxvalue(notendofslider)【发布时间】：2012-01-2815:04:27【问题描述】：我有一个阶梯式滑块，带有非线性阶梯-代码：$(function()vartrueValues=[5,10,20,50,100,150];varvalues=[10,20,3... 查看详情

使用带有 jquery ui 滑块的淘汰赛 js

】使用带有jqueryui滑块的淘汰赛js【英文标题】：Usingknockoutjswithjqueryuisliders【发布时间】：2012-10-0302:16:19【问题描述】：我正在尝试确定淘汰赛js是否可以很好地解决以下问题：我有多个要链接到文本框的滑块。更改文本框时，... 查看详情

Jquery UI Slider在输入字段中更改时更改滑块的值

】JqueryUISlider在输入字段中更改时更改滑块的值【英文标题】：JqueryUISliderchangevalueofsliderwhenchangedininputfield【发布时间】：2012-10-0907:53:19【问题描述】：$("#storlekslider").slider(range:"max",min:0,max:1500,value:0,slide:function(event,ui)$("#storl 查看详情

更改范围滑块的颜色

...o/NpnSlider/。基本上我已经集成了这个功能，但问题是我们如何根据这个滑块的偏好来改变颜色【问题讨论】：【参考方案1】：添加您的css文件-我认为更改范围滑块颜色.slider[_ngcontent-c1].b 查看详情

PyQt4 - 将滑块的范围链接到绘图轴的范围

...时间】：2016-08-1908:24:12【问题描述】：使用PyQt4和matplotlib如何将滑块的范围（即长度）链接到同一窗口中绘图轴的范围，这样即使窗口重新缩放，滑块的长度也与绘图轴相同?【问题讨论】：这是Qt滑块还是mpl.widgets滑块？@fen我的 查看详情

在 Qualtrics 调查中，如何使用 JavaScript 动态设置滑块的范围？

】在Qualtrics调查中，如何使用JavaScript动态设置滑块的范围？【英文标题】：InQualtricssurveys,howcanyouuseJavaScripttodynamicallysettherangeofaslider?【发布时间】：2014-06-1215:50:33【问题描述】：我在Qualtrics中进行了一项调查，需要让我的项目... 查看详情

在 React 中，如何在范围滑块的拇指上创建一个气泡头

】在React中，如何在范围滑块的拇指上创建一个气泡头【英文标题】：InReact,howtocreateabubbleheadontopofthethumbofarangeslider【发布时间】：2021-10-2808:29:56【问题描述】：varslider=document.getElementById("myRange");varoutput=document.getElementById("demo");ou... 查看详情

如何防止多个句柄在 jQuery UI 滑块中重叠？

】如何防止多个句柄在jQueryUI滑块中重叠？【英文标题】：HowtokeepmultiplehandlesfromoverlappinginjQueryUIslider?【发布时间】：2017-03-2312:13:42【问题描述】：我想要一个带有两个句柄的jQueryUI滑块，可以将它们的值设置为彼此独立。我还希... 查看详情