Yii Framework CJuiSliderInput 表單滑桿輸入元件：模型綁定與驗證整合

CJuiSliderInput 專為表單設計，直接綁定模型屬性，支援驗證規則、AJAX 提交與隱藏欄位同步。

表單整合完整範例

<?php $form=$this->beginWidget('CActiveForm', array('id'=>'slider-form')); ?>
    <?php echo $form->errorSummary($model); ?>

    <?php $this->widget('zii.widgets.jui.CJuiSliderInput', array(
        'model' => $model,
        'attribute' => 'size',      // 對應模型屬性
        'name' => 'my_slider',
        'value' => 50,
        'event' => 'change',        // 觸發模型更新的事件
        'options' => array(
            'min' => 0,
            'max' => 100,
            'slide' => 'js:function(event,ui){ $("#amount").text(ui.value); }',
        ),
        'htmlOptions' => array('style' => 'width:200px; float:left;'),
    )); ?>

    <center id="amount" style="margin-left:215px;">50</center>
    <br><br>

    <div class="row submit">
        <?php echo CHtml::submitButton('送出'); ?>
    </div>
<?php $this->endWidget(); ?>

模型定義與驗證

class DataModel extends CFormModel {
    public $size;

    public function rules() {
        return array(
            array('size', 'numerical', 'integerOnly' => true, 'min' => 0, 'max' => 100),
            array('size', 'safe'),  // 大量賦值允許
        );
    }

    public function attributeLabels() {
        return array('size' => '尺寸百分比');
    }
}

控制器處理

public function actionIndex() {
    $model = new DataModel();
    $model->size = 50;  // 預設值

    if (isset($_POST['DataModel'])) {
        $model->attributes = $_POST['DataModel'];
        if ($model->validate()) {
            $this->render('result', array('model' => $model));
            return;
        }
    }
    $this->render('index', array('model' => $model));
}

結果頁顯示

<h2>提交結果</h2>
<p>尺寸: <?php echo $model->size; ?>%</p>

CJuiSliderInput vs CJuiSlider 差異

進階：多滑桿表單

<?php foreach (array('brightness', 'contrast', 'saturation') as $attr): ?>
    <div class="slider-row">
        <label><?php echo $model->getAttributeLabel($attr); ?></label>
        <?php $this->widget('zii.widgets.jui.CJuiSliderInput', array(
            'model' => $model,
            'attribute' => $attr,
            'options' => array('min' => -100, 'max' => 100, 'value' => 0),
        )); ?>
        <span class="value-display">0</span>
    </div>
<?php endforeach; ?>

注意事項

• event: 'change' 只在滑動結束更新模型，'slide' 會頻繁觸發驗證影響效能
• 隱藏欄位會自動產生，名稱為 attribute 值
• 搭配 CActiveForm 的 enableAjaxValidation 可即時驗證
• 行動裝置觸控體驗優於桌面滑鼠，建議加大滑桿觸控區域