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>