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!
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);}',
),
)); ?>