Question

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

示例：值min：40 max：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 ) + "");
};

Answer 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]);

Answer 2

只需为change事件提供一个处理程序来绘制标签：

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;
    }
}

Answer 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 ) );
});

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

3 个答案: