问题标签 [ion-range-slider]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
350 浏览

javascript - Vue-form-generator 更新范围滑块属性

我目前正在设置一个多步表单,其中一个滑块的输入需要影响另一个滑块的最大值。我可以使用 this.tabSchema.(tab-id).fields[0].rangeSliderOptions.max 手动更新最大值,但这根本不会改变 UX。我可以在控制台中看到 max 已正确更新,但 UX 显示旧的 max。

深入研究 ion.RangeSlider 文档,我发现它有 .update、.destroy 和 .reset 方法。但是,这些似乎需要一个特定于 jquery 的函数 .data(),以便正确设置然后调用 .update() 的滑块对象。我没有看到任何在 Vue 中使用的文档。有没有已知的方法可以做到这一点?如果没有,有人知道解决方法吗?

ETA:请求代码。这是 tabSchema 的相关部分。tabSchema 中有更多选项卡,但这些是相关的两个:

这是验证每个选项卡的代码:

ion.RangeSlider 的文档(底部的公共方法):https ://github.com/IonDen/ion.rangeSlider

Vue-form-generator 范围滑块的文档: https ://icebob.gitbooks.io/vueformgenerator/content/fields/slider.html

0 投票
1 回答
2611 浏览

jquery - 在 Angular 中获取 ion-rangeslider 的值

ion.rangeslider在我的角度应用程序中使用它,它显示得很好。但是我怎样才能得到的值,silder我需要动态更新滑块的最小值和最大值。

我在 SO 中看到了一些问题,例如ion-rangeslider not getting displayedion RangeSlider: customize grid in case of custom values。其他一些解决方案,但他们没有帮助我。

我的html如下

零件

是否有任何其他方法来获取滑块的值或任何机会以角度方式获得。建议我你会得到很好的回报,谢谢。

0 投票
5 回答
7259 浏览

css - 更改离子范围滑块手柄的颜色

如果我尝试将离子范围滑块的默认颜色(可在此处获得:https ://github.com/IonDen/ion.rangeSlider )从红色(默认)更改为蓝色,如下所示:

它变成正方形:

在此处输入图像描述

(原来它看起来像一条细红线在此处输入图像描述:)

我究竟做错了什么?

演示

https://jsfiddle.net/chapkovski/xpvt214o/995048/

0 投票
1 回答
595 浏览

css - 突出显示 ion.rangeslider 上的范围

bootstrap-slider可以突出显示滑块上的某些范围:

例子:

(上面代码的jsfiddle:https ://jsfiddle.net/chapkovski/Ljmh7190/ )

是否可以使用 ion.RangeSlider 实现相同的效果?http://ionden.com/a/plugins/ion.rangeSlider/index.html

0 投票
1 回答
418 浏览

css - 在 Shiny 中,如何为范围滑块的两个按钮使用不同的颜色?

Shiny 使用了ion-rangeslider。我已经能够弄清楚如何修改滑块的颜色和它的一些其他属性。下面的代码生成一个带有绿色按钮的常规滑块和一个带有红色按钮的范围滑块。

我希望范围滑块上的两个按钮具有不同的颜色。例如,红色和蓝色 io 红色和红色。有没有办法做到这一点?


带有修改颜色的滑块按钮


0 投票
2 回答
2321 浏览

css - 在 Shiny 中,如何更改范围滑块标签的格式?

Shiny 使用了ion-rangeslider

我正在尝试更改范围滑块标签的格式。在下面的代码中,.irs-single { color: black; background: transparent }删除了常规滑块(顶部)中标签的默认蓝色背景,但它对范围滑块(底部)的标签没有影响。


闪亮的输出


我尝试添加以下各项,直接针对范围滑块:

  1. .js-irs-1 .irs-single { color: black; background: transparent }
  2. .js-irs-1 .irs-single.to { color: black; background: transparent }
  3. .js-irs-1 .irs-single.from { color: black; background: transparent }

但是响铃滑块的标签仍然显示为默认颜色,蓝色:

闪亮的输出


例如,不可能直接定位范围滑块按钮之一的格式:

.js-irs-1 .irs-slider.to { background: red }

闪亮的输出

0 投票
1 回答
212 浏览

javascript - 如何防止点击 Ion.RangeSlider 中的间隔?

在 Ion.RagerSlider 插件中,间隔栏是可点击的。当用户在尝试滚动时意外单击元素时,这是移动设备上的一个问题。

如何禁用间隔栏上的点击事件?

我无法在官方文档中找到解决方案。

0 投票
1 回答
210 浏览

javascript - 等到另一个插件初始化上的jquery插件

我正在使用 iziModal jquery 插件和离子范围滑块。基本上我有一个记录表,每条记录都有一个编辑按钮,显示一个 iziModal,里面有滑块。

我有一个名为“slidersInit.js”的js文件离子范围滑块插件初始化

})

现在在我的实际页面上,我调用脚本

请注意,它位于离子范围滑块和 izimodal 之前的底部。

所以在那个页面上我也有 iziModal 配置

问题是由于某种原因,当我打开 iziModal 时,所有滑块都显示为 0,这意味着它们在 iziModal 打开之前尚未初始化,并且只有在我在 Modal 打开函数中初始化它们时才有效。

问题是我想在 iziModal 之外执行此操作,因为如果我每次单击记录编辑按钮调用模态时调用滑块初始化,它将无法工作,它会保留以前的值并且不会更新。

那么有没有一种方法可以让我在模态之前等待滑块被初始化?

0 投票
1 回答
464 浏览

angular - Angular:通过范围滑块更改 setinterval 计时器

我正在使用 ionic 4 和 angular 。我想使用离子范围滑块。范围滑块允许用户通过移动滑块来更改值的范围。l 想改变setInterval的值来减少刷新或提高刷新速度。

我的代码

问题是, this.time功能rangeChanged没有得到更新。当我更改范围滑块时,值setInterval仍然相同!没有更新,在这种情况下setInterval,即使他获得新值,我也必须停止然后重新开始。我的观点是如何让它实时更新setInterval速度值?

html

0 投票
0 回答
74 浏览

javascript - 如何调用回调

我有一个 ion.rangeslider,它有 4 个回调:onStart、onUpdate、onChange、onFinish。

我有一个按钮功能。如何从按钮调用 onUpdate 回调?

提前致谢!