Yiiframework Range Slider input

Question

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!

score 2 · Accepted Answer · answered Nov 24 '13 at 14:01

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

The Humble Rat · Answer 2 · 2013-11-22T15:35:14.253

1

This was a little big to be a comment. But please try the following

$this->widget('zii.widgets.jui.CJuiSliderInput',array(
  'name'=>'$setting->label',
  'attribute'=>'[$i]value',
  'value'=>$value,
  'options'=>array(
      'min'=>0,
      'max'=>10,
  ),
));

Also please try this

$this->widget('zii.widgets.jui.CJuiSliderInput',array(
  'name'=>'$setting->label',
  'attribute'=>'[$i]value',
  'value'=>$value,
  'options'=>array(
      'min'=>0,
      'max'=>10,
  ),
 'htmlOptions'=>array(
    'style'=>'height:20px;',
),
));

edited Nov 22 '13 at 15:35

answered Nov 22 '13 at 14:06

The Humble Rat

4,586
6
39
73

Hey Jon, I get the following error when I try your code: htmlspecialchars() expects parameter 1 to be string, object given I think something is wrong with the 'value' – Shark Nov 22 '13 at 15:12
@YorkKeijzer I have added another snippet to try If it still causes an issue try changing the line to this `//'value'=>$value,`, also try hashing out the attribute value. But test with one hashed, the other not and then both hashed. – The Humble Rat Nov 22 '13 at 15:36
Thanks, I have been busy. I now have the visual part working: http://oi39.tinypic.com/2j3h4si.jpg with the following code: $this->widget('zii.widgets.jui.CJuiSliderInput',array( 'name' => $i, 'model'=>$value, 'attribute'=>"value", //'value'=>'$value', 'options'=>array( 'min'=>0, 'max'=>10, ), – Shark Nov 22 '13 at 17:56
It just wont update yet. The problem is in the name of the range sliders, see the following screenshot: http://oi44.tinypic.com/2igbxo0.jpg. As you can see, the slider misses the $i in the name. Any idea how to add it? When I add "[$i]value" instead of "value" I get the following error: Property "UserSettingValue.[0]value" is not defined. – Shark Nov 22 '13 at 17:59

Yiiframework Range Slider input

2 Answers2