jquery-ui-slider 相关问题

jQuery UI Slider插件将选定的元素转换为滑块。有多种选项，如多个句柄和范围。可以使用鼠标或箭头键移动手柄。

我正在使用这个 UI 滑块。我必须用 3 种不同的颜色来制作这个滑块：手柄颜色句柄的前一部分句柄的下一部分像这样的东西：到目前为止，我已经可以把手柄了...

jquery css jquery-ui-slider

回答 4 投票 0

我的页面中有一个滑块，带有以下代码我的页面中有一个滑块，带有以下代码 <div id="sale-price-range" class="price-range" data-min="200000" data-max="2000000" data-unit="R$" data-min-field="precoMinVenda" data-max-field="precoMaxVenda" data-increment="100000"></div> 我的js代码是： // Price Range $(".price-range").each(function() { var dataMin = $(this).attr('data-min'); var dataMax = $(this).attr('data-max'); var dataUnit = $(this).attr('data-unit'); var minField = $(this).attr('data-min-field'); var maxField = $(this).attr('data-max-field'); var increment = $(this).attr('data-increment'); $(this).append( "<input type='text' class='first-slider-value' name='"+minField+"' val=''/><input type='text' class='second-slider-value' name='"+maxField+"'/>" ); $(this).slider({ range: true, min: 0, max: dataMax, step: increment, values: [ dataMin, dataMax ], slide: function( event, ui ) { event = event; if(ui.value < dataMin) { return false; } $(this).find( ".first-slider-value" ).val( dataUnit + " " + ui.values[ 0 ].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") ); $(this).find( ".second-slider-value" ).val( dataUnit + " " + ui.values[ 1 ].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") ); }, stop: function(event,ui) { if(ui.value >= dataMin) { postAjaxSearch(); } } }); $(this).find( ".first-slider-value" ).val( dataUnit + " " + $( this ).slider( "values", 0 ).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") ); $(this).find( ".second-slider-value" ).val( dataUnit + " " + $( this ).slider( "values", 1 ).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") ); }); 效果很好，但如果我尝试改变分钟：0，到分钟：数据分钟，我的滑块停止工作（我无法拖动它）。它继续调用 postAjaxSearch();，但它不会更改最大/最小值，也不会移动滑块手柄。为什么需要将 min 更改为 dataMin？因为我的滑块从 0 开始，但是滑块手柄从 dataMin 移动到 dataMax。 dataMin 和 0 之间的范围位于页面上，但无法移动到那里。我不想要这个，滑块应该从 dataMin 开始。我遇到了同样的问题，我通过在最小值上使用 parseInt() 解决了它 $("#price-slider").slider({ range: true, min: parseInt(price_min), max: price_max, values: [price_min, price_max], slide: function (event, ui) { $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); } }); 我不知道为什么会这样，这似乎是合乎逻辑的，两个极端都会起到同样的作用，但显然事实并非如此。还有一个解决方案我在 1.13.2 版本中遇到了同样的错误。然而，parseInt的解决方案对我没有帮助；有什么帮助，乘以 1000 进行调整，然后除以 1000。还是不明白问题出在哪里... 在 INIT 滑块传入参数之前是： step = 1000 min = 33900 max = 1100000 selected_min = 33900 selected_max = 1100000 初始化后，没有 * 1000 和 / 1000 滑块给了我 max_stop = 1099900 对我来说正确的是 $(element).slider({ range: true, min: min * 1000, max: max * 1000, step, values: [selected_min * 1000, selected_max * 1000], slide: function (event, ui) { const min_stop = ui.values[0] / 1000; const max_stop = ui.values[1] / 1000; $(`#${attribute}-min`).val(min_stop); $(`#${attribute}-max`).val(max_stop); }, stop: function (event, ui) { const min_stop = ui.values[0] / 1000; const max_stop = ui.values[1] / 1000; queryParams[attribute] = `${min_stop}-${max_stop}`; applyFilter(); } });

jquery-ui jquery-ui-draggable jquery-ui-slider

回答 2 投票 0

移动设备上的 jQuery UI 滑块触摸和拖放支持

我已经在项目中设计并实现了 jQuery UI 滑块。尽管它具有响应性，但滑块不会响应触摸和拖动。相反，您必须触摸您想要的位置

jquery jquery-ui touch jquery-ui-slider

回答 3 投票 0

如何将两个 LightSlider 滑块同步在一起？

我正在尝试使用 asNavFor 选项在页面上同步两个 LightSlider 滑块，但我无法让它们一起工作。我遵循了 LightSlider

javascript jquery slider jquery-ui-slider

回答 0 投票 0

在径向梯度[闭合]中改变颜色。

我为我的问题准备了一个完整的例子--一个div和3个jQuery UI滑块的截图。HTML代码。