如何從輸入框值管理Scriptaculous滑塊手柄

Question

我正在使用Scriptaculous創建具有兩個手柄的價格範圍滑塊。如何從輸入框值管理滑塊手柄。即滑塊手柄根據輸入框值移動。

嘗試如下

http://jsfiddle.net/paHjV/1/

任何幫助，請

Answer 1

我想你想要的是：

var priceRange; 

var validValues = [0, 50000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 450000, 500000, 550000, 600000, 650000, 700000, 750000, 800000, 850000, 900000, 1000000, 1050000, 1100000, 1150000, 1200000, 1250000, 1300000, 1350000, 1400000, 1450000, 1500000, 1550000, 1600000, 1650000, 1700000, 1750000, 1800000, 1850000, 1900000, 1950000, 2000000, 2050000, 2100000, 2150000, 2200000, 2250000, 2300000, 2350000, 2400000, 2450000, 2500000, 2550000, 2600000, 2650000, 2700000, 2750000, 2800000, 2850000, 2900000, 2950000, 3000000, 3050000, 3100000, 3150000, 3200000, 3250000, 3300000, 3350000, 3400000, 3450000, 3500000, 3550000, 3600000, 3650000, 3700000, 3750000, 3800000, 3850000, 3900000, 3950000, 4000000, 4050000, 4100000, 4150000, , 4200000, 4250000, 4300000, 4350000, 4400000, 4450000, , 4500000, 4550000, 4600000, 4650000, 4700000, 4750000, 4800000, 4850000, 4900000, 4950000, 5000000]; 

var loadPriceSlider = function() { 

     var handles = [$('price-min'), $('price-max')]; 

     // horizontal slider control with preset values 
     priceRange = new Control.Slider(handles, 'price-range', { 
      range: $R(0, 5000000, false), 
      sliderValue: [50000, 5000000], 
      values: validValues, 
      restricted: true, 
      onSlide: function (v) { 
       $('priceMin').value = ((v[0] != null) ? v[0] : 0); 
       $('priceMax').value = ((v[1] != null) ? v[1] : 0); 
      }, 
      onChange: function (v) { 
       if (v.length > 0) { 
        $('priceMin').value = ((v[0] != null) ? v[0] : 0); 
        $('priceMax').value = ((v[1] != null) ? v[1] : 0); 
       } 
      } 
     }); 
    }; 
loadPriceSlider(); 

$('priceMin').observe('change', function(){ 
    this.value = parseInt(this.value, 10); 
    priceRange.setValue(this.value, 0); 
}); 
$('priceMax').observe('change', function(){ 
    this.value = parseInt(this.value, 10); 
    priceRange.setValue(this.value, 1); 
});