Scriptaculous滑塊價格範圍滑塊與兩個手柄

Question

我正在使用Scriptaculous創建一個價格範圍滑塊與兩個句柄說最小值和最大值。如何將最小值和最大值存儲在單獨的隱藏字段中。

當前腳本如下，

<div id="price-range" class="filter-track"> 
    <span id="price-min" class="filter-handle" title="Scroll to set your minimum value">&gt;&gt;</span> 
    <span id="price-max" class="filter-handle" title="Scroll to set your maximum value">&lt;&lt;</span> 
</div> 
<input type="hidden" name="price" id="beds" value="0,100"/> 


var loadPriceSlider = function() { 

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

     // horizontal slider control with preset values 
     new Control.Slider(handles, 'price-range', { 
      range:$R(0, 5000, false), 
      sliderValue: [0, 3000], 
      values: [0, 100, 200, 300], 
      restricted: true, 
      onChange: function(v){ 
          $('price').value = v; 
         } 
     }); 
    }; 

它將存儲在逗號字段price分離（最小，最大）值。但我想將其存儲在單獨的字段中。這個怎麼做？請幫忙嗎？

Answer 1

您的代碼嘗試引用$（'price'），但名稱爲'price'的輸入具有'beds'的'id'。

這裏的修正HTML具有價格字段和附加字段：

<div id="price-range" class="filter-track"> 
    <span id="price-min" class="filter-handle" 
     title="Scroll to set your minimum value">&gt;&gt;</span> 
    <span id="price-max" class="filter-handle" 
     title="Scroll to set your maximum value">&lt;&lt;</span> 
</div> 
<ul> 
    <li>price: <input type="text" name="price" id="price" value="0,100"/></li> 
    <li>myRange <input type="text" name="myRange" id="myRange" value="0,100"/></li> 
</ul> 

和JavaScript：

var handles = [$('price-min'), $('price-max')]; 
// horizontal slider control with preset values 
new Control.Slider(handles, 'price-range', { 
    range: $R(0, 5000, false), 
    sliderValue: [0, 3000], 
    values: [0, 100, 200, 300], 
    restricted: true, 
    onChange: function(val){ 
     $('price').value = val; 
     $('myRange').value = val; 
    } 
}); 

這工作，加載這些JavaScript：

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=slider"></script>