Alf’s blog about geek stuffs

For a customer need, I’ve integrated the scriptaculous slider as shown here in Zend framework.

To achieve this, I’ve created a formSlider view helper which is then used by a slider form element.

The view helper and form element code is here. To allow ZF to find the helper, don’t forget to add path to helper in your bootstrap :

$layout->getView()->addHelperPath('Mc/View/Helper','Mc_View_Helper') ;

You need of course to include scriptaculous and prototype to make it work (available here and here) :

<script src="/prototype-1.6.0.2.js" type="text/javascript"></script>
<script src="/scriptaculous.js" type="text/javascript"></script>

Then, you can create a slider like this :

require_once('Mc/Form/Element/Slider.php') ;
$my_form->addElement(new Mc_Form_Element_Slider('my_element')
    ,'my_element') ;
$my_form->my_element->setLabel('My element : ')
    ->setMin(10)
    ->setMax(30)
    ->setStep(2);

and retrieve the value as usual :

$my_form->my_element->getValue() ;

And if you want to override the default style in your css, don’t forget the !important argument :

div.slider {
    width:256px !important;
    margin:10px 0 !important;
    background-color:lightgray !important;
    height:15px !important;
    position: relative !important;
 }

div.slider div.handle {
     width:10px !important;
     height:15px !important;
     background-color:darkgray !important;
     cursor:move !important;
     position: absolute !important;
 }