CJui Slider

CJuiSlider Input : Basic

<h1>CJuiSlider Input : Basic</h1>
<label for="amt">Volume:</label>
<input type="text" id="amount_basic" style="border:0; color:#f6931f; font-weight:bold;" value="50" />
<?php
$this->widget('zii.widgets.jui.CJuiSliderInput', array(
    'name'=>'slider_basic',
    'value'=>50,// default selection 
    'event'=>'change',
    'options'=>array(
        'min'=>0, //minimum value for slider input
        'max'=>100, // maximum value for slider input
        // on slider change event 
        'slide'=>'js:function(event,ui){$("#amount_basic").val(ui.value);}',
    ),
    // slider css options
    'htmlOptions'=>array(
        'style'=>'width:200px;'
    ),
));
?>

CJuiSlider Input : Animate

<h1>CJuiSlider Input : Animate</h1>
<label for="amt">Volume:</label>
<input type="text" id="amount_animate" style="border:0; color:#f6931f; font-weight:bold;" value="50" />
<?php
$this->widget('zii.widgets.jui.CJuiSliderInput', array(
    'name'=>'slider_animate',
    'value'=>50,// default selection 
    'event'=>'change',
    'options'=>array(
        'min'=>0, //minimum value for slider input
        'max'=>100, // maximum value for slider input
        'animate'=>true,
        // on slider change event 
        'slide'=>'js:function(event,ui){$("#amount_animate").val(ui.value);}',
    ),
    // slider css options
    'htmlOptions'=>array(
        'style'=>'width:200px;background-color:red;'
    ),
));
?>

CJuiSlider Input : Fixed Maximum

<h1>CJuiSlider Input : Fixed Maximum</h1>
<label for="amt">Volume:</label>
<input type="text" id="amount_fixed_maximum" style="border:0; color:#f6931f; font-weight:bold;" value="50" />
<?php
$this->widget('zii.widgets.jui.CJuiSliderInput', array(
    'name'=>'slider_fixed_maximum',
    'value'=>50,// default selection 
    'event'=>'change',
    'options'=>array(
        'min'=>0, //minimum value for slider input
        'max'=>100, // maximum value for slider input
        'animate'=>true,
        'range'=>'max',
        // on slider change event 
        'slide'=>'js:function(event,ui){$("#amount_fixed_maximum").val(ui.value);}',
    ),
    // slider css options
    'htmlOptions'=>array(
        'style'=>'width:200px;background-color:red;'
    ),
));
?>

CJuiSlider Input : Vertical

<h1>CJuiSlider Input : Vertical</h1>
<label for="amt">Volume:</label>
<input type="text" id="amount_vertical" style="border:0; color:#f6931f; font-weight:bold;" value="50" />
<?php
$this->widget('zii.widgets.jui.CJuiSliderInput', array(
    'name'=>'slider_vertical',
    'value'=>50,// default selection 
    'event'=>'change',
    'options'=>array(
        'min'=>0, //minimum value for slider input
        'max'=>100, // maximum value for slider input
        'animate'=>true,
        'orientation'=>'vertical',
        // on slider change event 
        'slide'=>'js:function(event,ui){$("#amount_vertical").val(ui.value);}',
    ),
    // slider css options
    'htmlOptions'=>array(
        'style'=>''
    ),
));
?>

CJuiSlider Input : Vertical & Step Value

<h1>CJuiSlider Input : Vertical & Step Value</h1>
<label for="amt">Volume:</label>
<input type="text" id="amount-vertical-step" style="border:0; color:#f6931f; font-weight:bold;" value="50" />
<?php
$this->widget('zii.widgets.jui.CJuiSliderInput', array(
    'name'=>'slider_vertical_step',
    'value'=>50,// default selection 
    'event'=>'change',
    'options'=>array(
        'step'=>10,
        'min'=>0, //minimum value for slider input
        'max'=>100, // maximum value for slider input
        'animate'=>true,
        'orientation'=>'vertical',
        // on slider change event 
        'slide'=>'js:function(event,ui){$("#amount-vertical-step").val(ui.value);}',
    ),
    // slider css options
    'htmlOptions'=>array(
        'style'=>''
    ),
));
?>

CJuiSlider Input : Ranger

<h1>CJuiSlider Input : Ranger</h1>
<label for="amt">Volume:</label>
<input type="text" id="amount-range" style="border:0; color:#f6931f; font-weight:bold;" value="1050-2750" />
<?php
$this->widget('zii.widgets.jui.CJuiSliderInput', array(
    'name'=>'slider_range',
     
    'event'=>'change',
    'options'=>array(
        'values'=>array(1050,2750),// default selection
        'min'=>0, //minimum value for slider input
        'max'=>5000, // maximum value for slider input
        'animate'=>true,
        // on slider change event 
        'slide'=>'js:function(event,ui){$("#amount-range").val(ui.values[0]+\'-\'+ui.values[1]);}',
    ),
    // slider css options
    'htmlOptions'=>array(
        'style'=>''
    ),
));
?>

CJuiSlider Input : Ajax Reques On Change

<h1>CJuiSlider Input : Ajax Reques On Change</h1>
<label for="amt">Volume:</label>
<input type="text" id="amount-range-action" style="border:0; color:#f6931f; font-weight:bold;" value="1050-2750" />
<?php
$ajaxurl=Yii::app()->createAbsoluteUrl("cjuislider/ajax");
$this->widget('zii.widgets.jui.CJuiSliderInput', array(
    'name'=>'slider_range_action',     
    'event'=>'change',
    'options'=>array(
        'values'=>array(1050,2750),// default selection
        'min'=>0, //minimum value for slider input
        'max'=>5000, // maximum value for slider input
        'animate'=>true,
        // on slider change event
        //$("#amount-range").val(ui.values[0]+\'-\'+ui.values[1]); 
        'slide'=>'js:function(event,ui){
            $.ajax({
                    url:"'.$ajaxurl.'",
                    data:"range1="+ui.values[0]+"&range2="+ui.values[1],
                    success:function(data){
                            $("#amount-range-action").val(data);
                        }                
                });            
            
            }',
    ),
    // slider css options
    'htmlOptions'=>array(
        'style'=>''
    ),
));
?>