Yii Framework Forum: Simple CJuiSlider Example - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Simple CJuiSlider Example Dynamically update page element on slide event Rate Topic: -----

#1 User is offline   PrplHaz4 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 108
  • Joined: 28-September 09
  • Location:Boston, MA

Posted 04 August 2010 - 07:25 PM

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/...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?
0

#2 User is offline   Brasuca 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 16
  • Joined: 05-August 10
  • Location:Belo Horizonte, Brazil

Posted 09 August 2010 - 12:51 PM

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

#3 User is offline   PrplHaz4 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 108
  • Joined: 28-September 09
  • Location:Boston, MA

Posted 10 August 2010 - 07:25 PM

View PostBrasuca, on 09 August 2010 - 12:51 PM, said:

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....
0

#4 User is offline   Brasuca 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 16
  • Joined: 05-August 10
  • Location:Belo Horizonte, Brazil

Posted 11 August 2010 - 12:32 AM

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

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

0

#5 User is offline   PrplHaz4 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 108
  • Joined: 28-September 09
  • Location:Boston, MA

Posted 11 August 2010 - 08:02 PM

View PostBrasuca, on 11 August 2010 - 12:32 AM, said:

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....
0

#6 User is offline   slabonart 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 13-April 13

Posted 30 June 2014 - 05:06 PM

<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
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users