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

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/