Question

I’m using Scriptaculous to create a price range slider with two handles. How can I manage slider handle from input box value. ie, slider handle moves according to input box values.

Tried as follows

http://jsfiddle.net/paHjV/1/

Any help please

Answer 1

I think what you want is:

var priceRange;

var validValues = [0, 50000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 450000, 500000, 550000, 600000, 650000, 700000, 750000, 800000, 850000, 900000, 1000000, 1050000, 1100000, 1150000, 1200000, 1250000, 1300000, 1350000, 1400000, 1450000, 1500000, 1550000, 1600000, 1650000, 1700000, 1750000, 1800000, 1850000, 1900000, 1950000, 2000000, 2050000, 2100000, 2150000, 2200000, 2250000, 2300000, 2350000, 2400000, 2450000, 2500000, 2550000, 2600000, 2650000, 2700000, 2750000, 2800000, 2850000, 2900000, 2950000, 3000000, 3050000, 3100000, 3150000, 3200000, 3250000, 3300000, 3350000, 3400000, 3450000, 3500000, 3550000, 3600000, 3650000, 3700000, 3750000, 3800000, 3850000, 3900000, 3950000, 4000000, 4050000, 4100000, 4150000, , 4200000, 4250000, 4300000, 4350000, 4400000, 4450000, , 4500000, 4550000, 4600000, 4650000, 4700000, 4750000, 4800000, 4850000, 4900000, 4950000, 5000000];

var loadPriceSlider = function () {

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

        // horizontal slider control with preset values
        priceRange = new Control.Slider(handles, 'price-range', {
            range: $R(0, 5000000, false),
            sliderValue: [50000, 5000000],
            values: validValues,
            restricted: true,
            onSlide: function (v) {
                $('priceMin').value = ((v[0] != null) ? v[0] : 0);
                $('priceMax').value = ((v[1] != null) ? v[1] : 0);
            },
            onChange: function (v) {
                if (v.length > 0) {
                    $('priceMin').value = ((v[0] != null) ? v[0] : 0);
                    $('priceMax').value = ((v[1] != null) ? v[1] : 0);
                }
            }
        });
    };
loadPriceSlider();

$('priceMin').observe('change', function(){
    this.value = parseInt(this.value, 10);
    priceRange.setValue(this.value, 0);
});
$('priceMax').observe('change', function(){
    this.value = parseInt(this.value, 10);
    priceRange.setValue(this.value, 1);
});