2

请任何人都可以帮助我处理 jquery Slider 范围吗？我是 jQuery 新手，并试图在拖动左/右范围内实现 min（右箭头图标）和 max（左箭头图标）。

价格范围：0 - 1000 == (>) ======== (<) ===

我想用带有左右箭头的个人图像替换这些图标。是否可以？

我还附上了图片。

$(function() {
    var values = [0,25,50,100,200,400,700,1000];
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 1000,
        step:50,
        orientation: "horizontal",
        values: [ 0,1000 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );
            console.log("From: "+ui.values[0],"To: "+ui.values[1]);
            $( "#min" ).val( ui.values[ 0 ] );
    $( "#max" ).val( ui.values[ 1 ] );
        }
    });
    $( "#amount" )
    .val( "£" + $( "#slider-range" )
    .slider( "values", 0 ) + " - £" + $( "#slider-range" )
    .slider( "values", 1 ));
});
$( "#slider-range a").hide();
4

2 回答 2

1

快速查看标记后，jQuery-UI 似乎无法区分这两个滑块。这不是一个大问题。我建议在构建滑块时将 amin-value和相应地添加max-value到ui-slider-handles 中。这样的事情应该可以解决问题：

$('#slider-range').slider({
     range: true,
     min: 0,
     max: 1000,
     step:50,
     orientation: "horizontal",
     values: [ 0,1000 ],
     slide: function(event, ui) {
          $('#amount').val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );
          $('#min').val( ui.values[ 0 ] );
          $('#max').val( ui.values[ 1 ] );
     }
}).find('.ui-slider-handle')
     .eq(0).addClass('min-slider').end()
     .eq(1).addClass('max-slider');

有了这些类，您就可以设置 CSS 以针对它们并根据需要操纵它们的外观。:)

于 2012-08-06T14:46:35.597 回答
0

滑块句柄可以由类识别ui-slider-handle。你可以尝试background-image在那些使用 CSS 的人身上加上一个：

#my-slider .ui-slider-handle { background-image: url(min.png); }

您可能需要设置其他background-*属性才能正常工作。

在第二个滑块（HTML 中的第一个滑块之后）上放置不同的背景图像作为海报的练习。

于 2012-08-06T14:41:10.717 回答