Jquery Slider UI 动态步长

发布于 2024-12-02 19:33:51 字数 190 浏览 0 评论 0原文

我有一个具有以下属性的滑块:

  • 水平方向
  • 一个手柄
  • 最小 2
  • 最大 65

我的目标是强制用户仅在 7 个点之间进行选择(例如:“2, 3, 4, 26, 39, 52, 65") 仅此而已。

如何创建动态步长或如何仅允许这些点作为滑块步长?

I have a slider with the following properties:

  • an horizontal direction
  • one handle
  • a min of 2
  • a max of 65

My goal is to force the user to choose between only 7 points (for example: "2, 3, 4, 26, 39, 52, 65") and nothing more.

How do I create a dynamic step size or how do I allow only those points to be the slider steps?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

逆光飞翔i 2024-12-09 19:33:51

为什么不使用只有 7 个点的滑块,并使用表格转换您的值:

请参阅我的 jsfiddle 示例 http:// jsfiddle.net/bouillard/Uy5sD/

Why not use a slider with only 7 points, and convert your value with a table:

see my jsfiddle example http://jsfiddle.net/bouillard/Uy5sD/

小巷里的女流氓 2024-12-09 19:33:51

我建议您查看 slide 事件。文档位于此处
它说

根据 ui.value 返回 false 以防止滑动。

因此,当该值不是您想要的值时,您只需返回 false 即可。

编辑:该死的,链接刚刚让你进入滑块页面。
我所说的是在 Events 选项卡中,它是一个名为 slide

Edit2:a fiddle 使用它。与其他解决方案的主要区别在于,该解决方案的滑动不均匀。

Edit3:另一个小提琴。在这个例子中,如果在幻灯片结束时达到了不正确的值,它将返回到之前的正确值。

I suggest that you look at the slide event. Doc is here.
It says

Return false in order to prevent a slide, based on ui.value.

So you'll just have to return false when the value is not the one you're aiming.

Edit: Damn it, the link just got you to the slider page.
What I'm talking about is in the Events tab, and it's the one named slide

Edit2: a fiddle using it. The main difference with the other solution is that the sliding won't be uniform in this one.

Edit3: Another fiddle. In this one , if an incorrect value is reached at the end of the slide, it will go back to the previous correct value.

情徒 2024-12-09 19:33:51

在下面的价格滑块步长值动态更新中,如 1 到 10000 之间的步长将为 1001000050000 之间的步长为 100 strong>步长将为500,然后步长将为1000,直到100000,然后步长将为1500、10000、100000 基于定义值。

当我们将大量价格从低到高调整时,此滑块将非常有用。

只是我们需要定义步骤集合以及步骤更改时给定步骤值的另一个集合,我们需要定义该值。
<>
http://jsfiddle.net/Ng_gajera/bt8dusrz/2/

In the following rang price slider step value update dynamically like between 1 to 10000 step will be 100 and between 10000 to 50000 step will be 500 then step will be 1000 Until then 100000 then step will be 1500, 10000, 100000 bases on define value.

This slider will be useful when we went to make steps lower to higher in a big amount of price.

Just we need to define the collection of steps and another one for a given step value on step change, we need to define that value.
<>
http://jsfiddle.net/Ng_gajera/bt8dusrz/2/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文