Scriptaculous slider price range slider with two handle - prototypejs

Question

I'm using Scriptaculous to create a price range slider with two handles says minimum and maximum values. How can I store minimum and maximum values in separate hidden field.
Current script as follows,
<div id="price-range" class="filter-track">
<span id="price-min" class="filter-handle" title="Scroll to set your minimum value">>></span>
<span id="price-max" class="filter-handle" title="Scroll to set your maximum value"><<</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;
}
});
};
It will store comma separated (min,max) values in price field. but i would like to store this in separate field. How to do this? Any help please?

Answer 1

Your code tries to refer to $('price') but you the input with the name 'price' has the 'id' of 'beds'.
Here's corrected HTML which has the price field, and an additional field:
<div id="price-range" class="filter-track">
<span id="price-min" class="filter-handle"
title="Scroll to set your minimum value">>></span>
<span id="price-max" class="filter-handle"
title="Scroll to set your maximum value"><<</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>
And the 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;
}
});
This works, loading these 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>