<script type="text/javascript" charset="utf-8">

    function CoolSlider(fieldName, sliderOptions, currentOption, element) {
      range = $R(0, sliderOptions.size() - 1 );
      this.fieldName = fieldName;
      this.sliderOptions = sliderOptions;
      this.currentOption = currentOption;
      this.element = element;
      this.slider = new Control.Slider('handle-' + this.fieldName, 'slider-' + this.fieldName, {
        increment: 41,
        range: range,
        values: range.toArray()
      });

      this.changeOptionTo = function(newOption){
        this.element.removeClassName('option' + this.currentOption);
        this.element.addClassName('option' + newOption);
        this.currentOption = newOption;
      }

      return true;
    };

    document.observe("dom:loaded", function() {

      sliderOptions = new Hash();
      sliderOptions.set(0, 'any');
      sliderOptions.set(1, 'baby');
      sliderOptions.set(2, 'toddler');
      sliderOptions.set(3, 'child');
      sliderOptions.set(4, 'parent');

      ageSliderElement = $('slider-age');
      ageSlider = new CoolSlider('age', sliderOptions, 0, ageSliderElement);
      ageSlider.slider.options.onChange = function(value) { ageSlider.changeOptionTo(value); }

      durationSliderElement = $('slider-duration');
      durationSlider = new CoolSlider('duration', sliderOptions, 0, durationSliderElement);
      durationSlider.slider.options.onChange = function(value) { durationSlider.changeOptionTo(value); }


    });
  </script>