尝试创建动态范围滑块

Question

我一直在尝试使用 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>