Change The Value Of Cjuislider With Input Box Value

I have a CJuiSlider that works fine… when slider value changed that value get displayed in input box… up to this is fine, now i want totally different of this. i.e. when value changed in the input box (by typing value using keyboard) then slider also change its value according to the value of the input box…

my code is–

$this->widget('zii.widgets.jui.CJuiSlider', array(



 'change'=>'js:function{$("#plan_year").value($("#planSlider").slider( "option", "value" ));}',

// additional javascript options for the slider plugin




    'slide'=>'js:function(event, ui) { $("#plan_year").val(ui.value);}', 



      'style'=>'height:12px; width:500px'




<input type="text" name="Calculator[plan_year]" id="plan_year" style="border:0; color:#f6931f; font-weight:bold;" />

i want something like this

 'change'=>'js:function{$("#plan_year").value($("#planSlider").slider( "option", "value" ));}',

so that slider can change according to the value entered in the input box.

Is there a way to do this?

For example:

$script = '$( "#plan_year" ).on("change", function() {

    $("#planSlider").slider( "value", $(this).val() );


Yii::app()->clientScript->registerScript('input-slider', $script, CClientScript::POS_READY);