Simple CJuiSlider Example

So, still new to this, trying to figure out these CJui controls. Basically I just want to be able to have a CJuiSlider dynamically update a text label on the screen when it changes values (similar to the JQuery example given on this page: http://jqueryui.com/demos/slider/#slider-vertical). The trouble I’m having is that I’d like to use the Yii control instead, but can’t seem to get it working right. This is the code I have:




<?php

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

    'value'=>37,

    'id'=>'amtSlider',

    // additional javascript options for the slider plugin

    'options'=>array(

        'min'=>0,

        'max'=>100,

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

    ),

    'htmlOptions'=>array(

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

    ),

));

?>


<label for="amt">Volume:</label>

<input type="text" id="amt" style="border:0; color:#f6931f; font-weight:bold;" />



It seems when it is executed that the "'s (quotes) specifying the element to update “#amt” are being escaped…That’s my only guess as to what’s going wrong…any ideas?

bump, I am also interested in learning how to do this!

Sorry to report I haven’t really made any progress on this one yet…it’s pretty easy to do with the standard controls using the jquery example, but I kinda feel the need to leverage the Yii widgets where possible…

hey, try using the code below, that worked for me!


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

apparently that works…I swear I already tried that…argh. Thanks!! Now, I’ve set a default value for the slider using “value”, but it does not update the label until I move the slider…


<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;'

    ),

));

?>

look at this: My link