0

我一直试图弄清楚如何使用jQuery UI范围滑块来完成此功能。基本上这里的目标是：如果用户选择以下选项之一（Checkbox）让我们说例如：从 50 比索到 100 比索或从 0 到 99 比索，滑块会将最小句柄设置为 50 比索，最大句柄设置为 100比索。

http://s255.photobucket.com/user/testament1234/media/dynamicrangeslider_zpsb2ae70b4.jpg.html

另一个例子：如果用户选择 100 到 1000 比索，滑块会将最小句柄设置为 100 比索，将最大句柄设置为 1000 比索。这是我已经开始的。

<script>
jQuery(function() {
jQuery( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 500,
    step:5,
    values: [ 0, 300 ],
    slide: function( event, ui ) {
        jQuery( "#amount" ).val( "Php" + ui.values[ 0 ] + " - Php" + ui.values[ 1 ] );
    }

});
    jQuery( "#amount" ).val( "Php" + $( "#slider-range" ).slider( "values", 0 ) +
    " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>

我在这里迷路了，因为我不擅长后端编码。

更新-

<script>
var price_value = jQuery("input.price_range").slider("option", "values");


jQuery(function() {
jQuery( "#slider-range" ).slider( ("option", "values", [ 10, 25 ] ) {
    range: true,
    min: 0,
    max: 500,
    step:5,
    values: [ 0, 300 ],
    slide: function( event, ui ) {
        jQuery( "#amount" ).val( "Php" + ui.values[ 0 ] + " - Php" + ui.values[ 1 ] );
    }

});
    jQuery( "#amount" ).val( "Php" + $( "#slider-range" ).slider( "values", 0 ) +
    " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
4

0 回答 0