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'的'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>

带有两个手柄的Scriptaculous滑块价格范围滑块

1 个答案: