UI 滑块值显示“或更多”和“或更少”答案

【问题标题】：UI Slider value show "Or more" and "Or less"UI 滑块值显示“或更多”和“或更少”
【发布时间】：2012-12-21 18:33:25
【问题描述】：

如果有可能将最大值和最小值更改为范围滑块以搜索（例如）“40 或更少”和“60 或更多”之间的值，我会很高兴。因此，如果标准最大值为 60，最小值为 40，则滑块将正常工作在 41 到 59 之间，但是当将右把手设置为 60 时，标签将显示“60 或更多”，左把手设置为 40 时，标签将显示将显示“40 或更少”。

示例： 最小值：40 最大值：60。将左把手设置在滑块中间 (50) 并将右把手设置为最大值时，它将搜索介于 50 和无限高值之间的结果，并且标签将显示“50 - 60 或更多”。

function{
    $( "#range" ).slider({
        range: true,
        min: 40,
        max: 60,
        step: 1,
        values: [ 40, 60 ],
        slide: function( event, ui ) {
            $( "#label" ).val( "Value: " + ui.values[ 0 ] + " - " + ui.values[ 1 ] + "");
        }
    });
    $( "#label" ).val( "Value: " + $( "#range" ).slider( "values", 0 )+ " - " + $( "#range"     ).slider( "values", 1 ) + "");
};

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

制作自定义活动，伙计！定义有什么问题

$("#range").bind('rightIsMax',function(e,leftVal,rightMaxVal){
   $( "#label" ).val( "Value: "+leftVal+" - " + rightMaxVal + " or more");
});

当ui.values[ 1 ]===60 然后$("#range").trigger('rightIsMax',ui.values[0],ui.values[1]);

【讨论】：

当然，您可以参考滑块的最大值获取器，而不是 ===60 比较。哪个 jquery-ui 滑块应该有，但我不熟悉那个特殊的小部件
对不起，我不太擅长编码，但我已经设法让 UI 滑块工作。您能否在我的第一篇文章中将您的代码包含在我的代码示例中？感谢您的帮助！
当然，实际上我进行了更深入的研究，我发现我找不到两个滑块中的哪一个被移动了。你在这个问题上取得了一些进展吗？
嗯不知道你现在的意思，你的意思是你不能让我的代码示例运行吗？一个滑块不动？
哦，我的错，好的，我会在几分钟后发布一个示例

【解决方案2】：

只需为更改事件提供一个处理程序即可绘制您的标签：

http://jsfiddle.net/2MBGh/

change: function (event, ui) {
    var label = $('#label');

    switch (ui.value) {
        // min
        case 0:
            label.text('Less than 0.');
            break;
        // max
        case 10:
            label.text('Greater than 10.');
            break;
        default:
            label.text(ui.value);
            break;
    }
}

【讨论】：

这接近我正在寻找的结果，但是如果我想要两个车把，一个用于最小，一个用于最大（然后还有两个标签，因此结果可以写出）例如“值：40-60 或更多”）。喜欢这个：jqueryui.com/slider/#range。如果你有一分钟，你能解释一下吗？谢谢。
有点奇怪，直到滑块移动标签才显示出来。
@Wobot 因为最初设置标签 val 的代码丢失了

【解决方案3】：

还没有真正解决这个问题，所以如果有人想尝试修改标签，我用滑块制作了一个标准的 jsfiddle。

http://jsfiddle.net/77SsQ/4/

谢谢。

$(function() {
    $( "#range" ).slider({
        range: true,
        min: 40,
        max: 60,
        values: [ 40, 60 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
            }
        });
        $( "#amount" ).val( "" + $( "#range" ).slider( "values", 0 ) + " - " + $( "#range" ).slider( "values", 1 ) );
});

【讨论】：