Search code examples
phpjqueryyiiyii-extensionsyii-components

Yiiframework Range Slider input


I have a user settings page where users can change the settings of the application. The users can input a number between 0 and 10. See screenshot: http://oi43.tinypic.com/2uerazp.jpg

Now I would like to transform the input fields into a range slider using the CJuiSliderInput widget of the yiiframework: http://www.yiiframework.com/doc/api/1.1/CJuiSliderInput#maxAttribute-detail

I cannot seem to get the code working, this is the current code in view:

<?php foreach($settings as $i=>$value): ?> 
    <?php $setting=UserSetting::model()->findByPk($value->setting_id); ?> 
    <h4><?php echo CHtml::encode($setting->label); ?></h3> 
    <?php echo CHtml::activeTextField($value,"[$i]value"); ?>
<?php endforeach; ?>

I would like to replace the activeTextField with

$this->widget('zii.widgets.jui.CJuiSliderInput',array(
    'model'=>$model,
    'attribute'=>'[$i]value',
    'maxAttribute'=>'timeMax',
    // additional javascript options for the slider plugin
    'options'=>array(
        'range'=>true,
        'min'=>0,
        'max'=>10,
    ),
));

What values do I need to fill in to the widget to get it to work? Each textField input is from a different model btw.

The controller looks something like this(don't know if you need it):

$settingsvalues = UserSettingValue::model()->findAll('client_id=:id', array(
    ':id' => $id,                       
));                  
if(isset($_POST['UserSettingValue'])){   
    $valid = true; 
    foreach($settingsvalues as $i=>$value){
        if(isset($_POST['UserSettingValue'][$i]))
            $value->attributes = $_POST['UserSettingValue'][$i]; 
        $value->save(); 
        $valid = $value->validate() && $valid; 
    }
    if($valid)
        $value->save(); 
}
$this->render('settings',array(
    'model' => $model, 
    'settings' => $settingsvalues,
));

Thanks a lot!


Solution

  • I fixed the problem by putting a javascript function in the slider. It is not exactly as I intended in the beginning, but it'll do. The slider now changes the value in the input fields.

            <?Php               
                   $this->widget('zii.widgets.jui.CJuiSliderInput',array(
                        'name' => $i, 
                        'model'=>$value,
                        'attribute'=>"value",
                        'event'=>'change',
                       //'value'=>'$value',
                      'options'=>array(
                          'min'=>0,
                          'max'=>10,
                          'animate' => true,
                          'slide'=>'js:function(event,ui){$("#UserSettingValue_'.$i.'_value").val(ui.value);}',
                      ),
    )); ?>