Tag: uislider

Jquery ui slider：html中的value，min和max

我正在使用jquery-ui创建一些滑块，我有一个问题如何我可以执行以下操作： 我有这个HTML代码： A range slider: 这是js： $(“.range-slide”).each(function () { var $this = $(this); $(“.slide”, $this).slider({ values: [30, 60], min: 0, max: 100, range: true, slide: function (event, ui) { $(“span.amount”, $this).html(“” + ui.values[0] + ” – ” + ui.values[1]); } }); $(“.range-slide span.amount”).html(“” + $(“.slide”).slider(“values”, 0) + ” – ” + $(“.slide”).slider(“values”, 1)); }); Everyting工作正常但我怎么能这样做： […]

如何将Slider与其他复选框filter放在一起

我在使用Ui Slider和复选框filter时遇到问题。 它应该像这样工作： 当我使用滑块来设定价格目标时，我得到了一些结果。 然后希望使用复选框通过附加filter对这些结果进行排序。 毕竟我应该完全符合我的要求。 而不是我得到错误的匹配。 使用滑块后，我得到了我想要的东西但是当使用复选框时，所有东西都会粉碎。 我只获得复选框结果，没有滑块效果。 我不知道如何强迫他们一起工作。 如果仅使用滑块（不单击复选框），我还希望看到有关已找到结果数量的信息。 这是jsfiddle的例子： http ： //jsfiddle.net/m1z930r5/15/ HTML： 1 2 3 4 5 6 7 8 10 000 USD contains 1 2 3 4 12 000 USD contains 2 3 13 000 USD contains 4 5 14 000 USD contains 5 6 12 000 USD contains 5 […]

jQuery Slider意外表现？

经过许多教程和大量时间后，我设法用jQuery构建一个滑块。 然而，它并没有像我希望的那样顺利运作。 我使用了自定义句柄，并且看到新的jQueryUI没有句柄选项，我在CSS中创建了一个句柄。 但是，此句柄超出了滑块的所需边界。 我上传了一个测试页面，可以在这里找到。 我的代码如下： CSS jQuery的 window.onload = function () { var container = $(‘div.sliderGallery’); var ul = $(‘ul’, container); var itemsWidth = ul.innerWidth() – container.outerWidth() + 50; $(‘.handle’, container).slider({ min: -50, max: itemsWidth, stop: function (event, ui) { ul.animate({‘left’ : ui.value * -1}, 500); }, slide: function (event, ui) { ul.css(‘left’, ui.value […]

在UISlider下添加数字

我有一个用JQuery UI实现的UISlider。 我想在显示数字的滑块下添加一个图例。 我按照这个答案展示了如何实现它，然后将数字放在百分比值上。 这种方式当滑块大小改变时（例如浏览器resize），数字仍然在正确的位置。 这样做很好，但是如果浏览器窗口很小，或者滑块有很多数字，那么图例编号彼此太靠近了。 题： 如果数字“x”太近，我怎么能删除它？ 这是我尝试做的事情： if (i !== 0) { var prevLegendNum_offsetLeft = $(‘#legendNum’ + i).closest(‘.sliderLegend’).find(‘.sliderLegendNum’).offset().left var distance = $(‘#legendNum’ + i).offset().left – prevLegendNum_offsetLeft; console.log(distance); // Logs: 0 if (distance <= 35) { $('#legendNum' + i).remove(); } } 之所以我必须用prevLegendNum_offsetLeft完成整个事情，而不仅仅是$(‘#legendNum’ + (i – 1))是因为，如果有3个数字小于35彼此的距离，所以i后面的2个数字将被删除。 然后它将尝试访问$(‘#legendNum’ + (i – 1) ，但这不会出现，因此它将返回错误。 当我运行上面的代码时，它会删除除第一个之外的所有数字。 的jsfiddle […]

如何使用jQuery UI滑块动态更新highcharts

我正在寻找一种基于jQuery UI滑块确定的值动态更新Highcharts的方法。 我还不熟悉AJAX或JSON，所以我没有太多运气。 我试图让收入在给定月份内逐步增加（例如，订阅服务）。 为了更容易，我把它放在jsFiddle http://jsfiddle.net/nlem33/Sbm2T/3/上 。 任何帮助将不胜感激，谢谢！ $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: ‘container’, backgroundColor: null, type: ‘area’ }, title: { text: ” }, subtitle: { text: ” }, xAxis: { categories: [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’,], tickmarkPlacement: ‘on’, title: { text: ‘months’ } }, […]

jquery滑块，其值高于它，随滑块一起移动

我创建了一个带有查询/滑块的滑块，并用css设置了它。 （ http://jsfiddle.net/9qwmX/ ） 我成功地将所选值放入div容器中; 但现在我希望容器与滑块“相关”。 我试图使用ui.handle及其css left属性，这是一个百分比。 但是这种行为有点奇怪：有时它会在滑块的左侧移动，有时会偏移10px。 问题：有没有人知道一个好方法让包含滑动值的盒子随手柄移动？

沿着日期和时间滚动的Javascript滑块

我已经看到了一些选择日期范围的jQuery滑块的好例子： http ： //ghusse.github.com/jQRangeSlider/stable/demo/ 时间范围： http ： //marcneuwirth.com/blog/2011/05/22/revisiting-the-jquery-ui-time-slider/ 但是我正在寻找能够选择日期范围到月，日，分钟的东西。 能够将它作为日期范围选择器和普通滑块都很棒。 有没有人见过这样的实现？ 使用Unix时间作为我的值的正常jQuery UI滑块是否有意义？

UIslider按钮不适用于复选框filter

我试图弄清楚如何强制滑块的按钮移动它而不是正常滑动，但保持复选框filter仍然正常工作。 当我设置按钮移动滑块时，filter不会按照应有的方式工作。 当我将滑块代码从：values：[10000]更改为：value：10000时，问题就出现了。 这是我的代码和jsfiddle示例，正确工作的filter而不是工作按钮（在该示例中仅有滑块+复选框过滤，以显示我需要如何过滤产品）。 https://jsfiddle.net/7er9sxzq/ 我正在寻找任何帮助以使其有效。 CSS： body { font-family:’Arial’; color:#646464; } .continents-wrap { float:left; width:20%; margin:0 5% 0 0; padding:0; } .tabela-wrap { float:left; width:50%; margin:0 5% 0 0; padding:0; position:relative; } .tabela { float:left; width:50%; } .tabela div { float:left; width:90%; height:68px; line-height:68px; padding:0 5%; background:#eee; margin:0 0 1px; position:relative; } .number {font-size:12px;} […]

有没有办法让jQuery UI滑块以0开头而不是从底部开始？

看看这个jQuery UI Slider的演示 。 注意当手柄在底部下方时，值是0？ 有没有办法扭转这种情况，所以最顶部的手柄是0，底部的手柄是最大范围？ 我已经玩了一些选项，但到目前为止还无法让它发挥作用。

使用jQuery UI Slider自定义范围/变量集

我想看看我是否可以制作一个自定义数据集用于jQuery UI Slider 。 我正在一个服装尺寸范围为：[0,2,4,6,8,10,12,14,16,18,16W，18W，20W]的网站上工作 我遇到的问题是在18岁之后，当它跳到“宽”的尺寸时会有点独特。 在我添加16W，18W和on尺寸之前，我使用以下代码创建了一个工作滑块： $(“#slider-size .slider”).slider({ min: 0, max: 18, step: 2, slide: function(event, ui) { $(“.rsize”).text(ui.value); } }); 更改滑块时，该函数中的最后一个参数会更改文本值。 有谁知道怎么去添加16W，18W等到这个列表的末尾？ 谢谢！