Zend_Form jQuery slider

Question

How to make jQuery slider with fixed maximum ... exact like this:

http://jqueryui.com/demos/slider/#rangemin

I manage to do it half way:

$slider = new ZendX_JQuery_Form_Element_Slider('amount');
$slider->setLabel('Set Amount: ');
$slider->setJQueryParams(array('min' => 0, 'max' => 60, 'value' => 15));

I don't know how to display the value since it has its own code:

$(function() {
  $("#amount-slider").slider({
   range: "min",
   value: 15,
   min: 1,
   max: 60,
                        // !!! HOW TO
   slide: function(event, ui) {
    $("#amount").val('$' + ui.value);
   }
  });
  // !!! HOW TO
                $("#amount").val('$' + $("#amount-slider").slider("value"));
});

Answer 1

The JQuery code is added in ZendX_JQuery_View_Helper_Slider. Replace it with a custom implementation and use it instead of the regular ViewHelper.

Answer 2

Try this

$slider->setJQueryParams(array(
  'min' => 0,
  'max' => 60,
  'value' => 15,
  'slide' => new Zend_Json_Expr('function(event, ui) {
    $("#amount").val('$' + ui.value);
   }')
));

Answer 3

I have exactly same challenge now. Cant seem to create a range-slider within the Zend_Form.

Did you ever solve your problem? And if thats the case, could you please tell how ;)

Kind regards,

Answer 4

Solution

I solved my problem with selectToUISlider.jQuery.js plugin for jQuerySlider, it will hijack the select tag that you define in Form class. So just call like:

$('select').selectToUISlider();

Really elegant solution.

Here is the link: http://www.jquerylabs.com/selecttouislider-plugin.html http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/