jQuery UI：一键平滑滑块（默认值）？答案

【问题标题】：jQuery UI: smooth slider with one snap (to default value)?jQuery UI：一键平滑滑块（默认值）？
【发布时间】：2011-01-26 17:39:15
【问题描述】：

我想制作一个滑块，它可以捕捉到中心，同时在其他地方保持流畅的动作。类似于真实扬声器平衡滑块的 jQuery 版本。有可能吗？

或者我应该只创建我自己的带有可拖动对象的滑块，限制在一个轴上并包含它的框架，捕捉到位于框架中心的另一个对象（或网格）？

编辑：我只需要一个允许值的滑块，例如从 -10 到 -1、0 和 1 到 10（在 -1 和 1 之间捕捉到 0），步长：0.1

【问题讨论】：

标签： javascript jquery user-interface slider

【解决方案1】：

您应该可以使用 jQuery 滑块，但使用 slide event 限制其运动：

jSlider.slider({
    // other options...
    slide: function (event, ui) {
        if (ui.value > -1 && ui.value < 1 && ui.value != 0) {
            // force it to 0 between -1 and 1.
            jSlider.slider('value', 0); 
            return false;
        }
        return true;
    }
});

【讨论】：

像魅力一样工作。非常感谢！

【解决方案2】：

嗯...所以这就是我在脑海中的设想...一个像旋转木马一样在计时器上滑动的背景（也许这些是大图像），顶部有一排平滑滑动的缩略图。这就是你想要构建的？

编辑：这是你需要做的：

我很少发现需要使用 jQuery 插件。这是你需要的：

Mousedown（在滑块上）。 api.jquery.com/mousedown/。鼠标按下和释放时有回调。
在拖动滑块时跟踪滑块容器内的鼠标位置 docs.jquery.com/Tutorials:Mouse_Position
在您的鼠标仍未释放时使用 animate 函数移动滑块 api.jquery.com/animate/ 释放时停止动画。
当您的滑块到达其容器中的某个 x 位置时，强制“平滑”功能 - 即不同的动画功能。

【讨论】：

听起来很有趣，但比这简单得多。 :) 我只需要一个滑块，它允许从 -10 到 -1、0 和 1 到 10 的值（在 -1 和 1 之间捕捉到 0）。我实际上会将其添加到问题中。 :)
啊，知道了。第一次阅读时，“扬声器平衡滑块”就在我头上。什么是“在别处顺利行动”？
问题是（据我所知）使用 jQuery UI 滑块“捕捉”意味着“步进”——如果你想让它捕捉到一个地方，你可以让它以相等的增量捕捉到任何地方。我希望除零区域之外的任何地方的值分辨率都很高。

【解决方案3】：

使用以下内容，以便您的 jquery 滑块自动捕捉到该步骤中最近的位置。诀窍是实现您自己的步进间隔滑块。问题是，如果您的最大值和最小值相隔一小段距离（例如 5-10），您的幻灯片将分步运行，因为默认步长 = 1，因此您需要基于此计算步长。如果您的 max-min 值相隔很远（例如 1-1000 或更多），您可以保留 computed_step 计算并将其初始化为 1。

       max_limit = 30;
       min_limit = 5;
       stick_to_steps_of = 5;
       var computed_step = max_term/100; //you can vary the denominator to make it smoother
        $("#my_slider" ).slider({
            animate : true,
            value: max_limit,
            min: min_limit,
            max: max_limit,
            step: computed_step,
            stop: function( event, ui ) {
                d = parseInt(parseInt(ui.value)/stick_to_steps_of);
                rem = parseInt(ui.value)%stick_to_steps_of;
                var fval = 0;
                if (rem <= parseInt(stick_to_steps_of/2)) {
                    fval = d*stick_to_steps_of;
                }else{
                    fval = (d+1)*stick_to_steps_of; 
                }
                $("#my_slider").slider('option', 'value', fval); 
                $('#myslider_current_value').html(fval);  //some placeholder to show the current value
            }
        });

【讨论】：