Creating a custom input widget with CInputWidget

Yii has a very good set of form widgets, but as with every framework out there, Yii does not have them all. In this recipe, we will learn how to create your own input widget. For our example, we will create a range input widget.

Getting ready

Create a fresh application by using yiic webapp.

How to do it...

We will start with the widget itself:

1. Create a widget class named protected/components/RangeInputField.php as follows:

   <?php
   class RangeInputField extends CInputWidget
   {
      public $attributeFrom;
      public $attributeTo;
   
      public $nameFrom;
      public $nameTo;
   
      public $valueFrom;
      public $valueTo;
   
      protected function hasModel()
      {
         return $this->model instanceof CModel && $this->attributeFrom!==null && $this->attributeTo!==null;
      }
   
      function run()
      {
         if($this->hasModel())
         {
            echo CHtml::activeTextField($this->model, $this->attributeFrom);
            echo ' &rarr;...