Scriptaculous slider price range slider with two handle

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">&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; 
                        }
        });
    };

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">&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>

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>