Tag: jquery ui slider

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

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

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 Slider – >鼠标滚轮支持?

你可能已经知道我是jQuery的新手,所以仍然非常允许不属于这个主题的代码改进。 这是我的HTML代码: Bananas: 这是我可怕的js代码: $( “#bananas” ).slider({ orientation: “vertical”, range: “min”, min: 0, max: 100, value: 20, step: 5, slide: function( event, ui ) { $( “#bananas_amount_percent” ).val( ui.value + ” %” ); // the code displays a percentage by standart, but I need the real value, too: var bananas_amount_percent = $( “#bananas_amount_percent” ).val(); var […]

jQuery UI – Slider – 如何添加值

小提琴 – 我有一套价值观。 是否可以在不破坏和重建幻灯片实例的情况下添加新句柄或删除其中一些句柄? 像$(‘#slider’).slider(‘addValueAt’,5); 或删除。 新值不能等于任何实际值,因此可能不超过12个值。 它的自定义代码我得到了alredy。 $(function () { var handlers = [0, 2, 4 , 9, 12]; $(“#slider”).slider({ min: 0, max: 12, values: handlers, slide: function (evt, ui) { for (var i = 0, l = ui.values.length; i ui.values[i + 1]) { return false; } else if (i === 0 && ui.values[i] […]

带有多个手柄和背景颜色的滑块内容

我正在尝试使用Jquery UI滑块,我可以在其中有多个句柄: $(function () { var handlers = [25, 50, 75]; $(“#slider”).slider({ min: 0, max: 100, values: handlers, slide: function (evt, ui) { for (var i = 0, l = ui.values.length; i ui.values[i + 1]) { return false; } else if (i === 0 && ui.values[i] < ui.values[i – 1]) { return false; } } […]

jQuery UI Sliders – 根据拖动方向选择重叠滑块

我有这个简单的jQuery UI Slider设置,其中包含一个范围和两个重叠的默认值。 在这个jsfiddle中可以找到整个东西(有一些铃声和口哨声): http : //jsfiddle.net/yijiang/XeyGS/ $(‘#slider’).slider({ min: 1, max: 11, range: true, values: [4, 4] }); 这个问题是,当您尝试向右拖动单个可见句柄时,它会失败,因为jQuery UI始终将最小句柄放在最顶层。 出于多种原因,这显然是不好的。 有没有办法允许jQuery UI根据用户开始拖动的方向选择要拖动的句柄?

jQuery滑块“更改”事件:如何确定谁调用它?

我有一个滑块,在我的音乐播放器中用作时间线。 最小值为0,最大值为歌曲长度(以秒为单位)。 每秒(我用计时器做),滑块移动,值设置为当前时间。 此代码行看起来像这样: $(“#sliderTime”).slider(“option”, “value”, document.sound.controls.currentPosition); 用户可以滑动/单击滑块并跳转到歌曲中的另一个点,这是通过触发“play(startPlayFromHere)”function。 它看起来像这样: $(“#sliderTime”).slider({ … change: function (event, ui) { play(ui.value) }, }); 问题是计时器中的代码行和用户都调用了滑块​​的相同“更改”事件,并且用户无法移动滑块。 所以我的问题是我如何确定用户是否调用了更改事件(这意味着它是计时器)? 我希望它足够清楚,谢谢!

jQuery UI Slider – 发布时从’slide’事件返回的值与’change’值不同

我有一个jQuery UI滑块: $(‘div.slider’).slider({ range: true, step: 250, min: 1000, max: 500000, values: [1000,500000], change: function(event, ui){ console.log($(this).slider(‘values’, 0)+’,’+$(this).slider(‘values’, 1)); }, slide: function(event, ui){ console.log($(this).slider(‘values’, 0)+’,’+$(this).slider(‘values’, 1)); } }); 由于一些奇怪的原因,当释放滑块(mouseup)时,值会略微改变。 幻灯片事件返回的内容与更改事件的内容不同。 任何人都有任何想法可能导致这个以及如何解决它? 我将在更改事件的回调中进行非常激烈的操作(意味着我不能只使用sldie),但还需要显示滑块的值,所以我不能只使用一个或者其他。 这里有一个奇怪的行动: http : //jsfiddle.net/5W6Zh/ 提前致谢

jQuery UI Slider – 最大值(不是滑块的结尾)

我有一个阶梯式滑块,非线性步骤 – 码: $(function() { var trueValues = [5, 10, 20, 50, 100, 150]; var values = [10, 20, 30, 40, 60, 100]; var slider = $(“#parkSlider”).slider({ orientation: ‘horizontal’, range: “min”, value: 40, slide: function(event, ui) { var includeLeft = event.keyCode != $.ui.keyCode.RIGHT; var includeRight = event.keyCode != $.ui.keyCode.LEFT; var value = findNearest(includeLeft, includeRight, ui.value); […]

带文本框输入的ui滑块

我们有一个ui滑块我们使用,它完美无缺。 码: jQuery(function() { jQuery( “#slider-range-min” ).slider({ range: “min”, value: 1, step: 1000, min: 0, max: 5000000, slide: function( event, ui ) { jQuery( “#amount” ).val( “$” + ui.value ); } }); jQuery( “#amount” ).val( “$” + $( “#slider-range-min” ).slider( “value” ) ); }); 如您所见,我们允许用户选择介于0到5,000,000之间的任何内容。 Html是: 我想要做的是添加一个与滑块协调工作的文本输入元素,以便用户滑动texy框增加,减少任何… 或者,如果用户在输入元素中键入数字,则滑块适当地移动。 有什么帮助吗? 预览是: