Yii: CActiveForm JUI – Slider Input (CJuiSliderInput)

After the topic yesterday about using a jQuery UI date picker in Yii forms, i’ll demonstrate a similar method of obtaining a slider form input for the same scenario:

In my example i’m setting the value of employee_holiday_entitlement by dragging a slider.

<div>
<?php echo $form->labelEx($model, 'employee_holiday_entitlement'); ?>
<?php
$this->widget('zii.widgets.jui.CJuiSliderInput', array(
'name' => CHtml::activeName($model, 'employee_holiday_entitlement'),
'value' => $model->attributes['employee_holiday_entitlement'],
// additional javascript options for the slider plugin
'options' => array(
'min' => 0,
'max' => 50,
'change' => 'js:function(){
$("#employee_holiday_entitlement_value").html($(this).slider("value"));
}'
),
));
?>
<span id="employee_holiday_entitlement_value"><?php echo $model->attributes['employee_holiday_entitlement']; ?></span>
<?php echo $form->error($model, 'employee_holiday_entitlement'); ?>
</div>

This will add a slider with an upper limit of 50, the “change” option is specified with a javascript callback to update the span below the slider with the current value. This gives the user an indication of the number they’ve chosen.