javascript - ダイナミック レンジ スライダーを作成してみる

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>