Our blog! | Send us feed | Ask us questions
main | downloads | documentation | comunity | about lionframework

Class: __SliderComponent


Class Overview

Class Overview | Inherited Properties, Constants, and Methods | Properties Summary | Properties Detail | Method Summary | Methods Detail | Constants Summary | Constants Detail
The slider is a component equipped with a small bar, also called a thumb, that slides along a visible line.

To use the slider control, the user can drag the thumb in one of two directions.

A slider is configured with a set of values from a minimum to a maximum. Therefore, the user can make a selection included in that range.

Slider tag is slider i.e. 

  1.    <comp:slider lowerLimit = "1"
    2. 

  2.                 upperLimit = "50"
    3. 

  3.                      value = "25"
    4. 

  4.                      name="my_slider"/>
    5.

lowerLimit and upperLimit attributes define the numeric range of the slider. value defines the initial value.
In this example, we have configured a simple slider defining a range between 1 and 50, with a default value of 25.

We can also link a label to an slider control, in order to show the slider value. To do that, we just need to set the inputReceiver attribute:

  1.    <comp:slider lowerLimit = "1"
    2. 

  2.                 upperLimit = "50"
    3. 

  3.                      value = "25"
    4. 

  4.              inputReceiver = "slider_label_2"
    5. 

  5.                       name = "example2"/>
    6. 

  6.  
    7. 

  7.     Slider value: <comp:label name="slider_label_2" text="25"/>
    8.

By default, an slider show the numeric value without decimals. To allow decimals, we can set the decimals attribute to the number of decimals to show to

In the other hand, an slider is rendered in an horizontal axis by default.
However we can alter it by setting the axis attribute:

  1.    <comp:slider lowerLimit = "1"
    2. 

  2.                 upperLimit = "50"
    3. 

  3.                      value = "25"
    4. 

  4.                       axis = "vertical"
    5. 

  5.                       name = "example2"/>
    6.
The axis attribute allowes horizontal (by default) and vertical.

Finally, we can customize the slider look & feel by setting the trackCssClass and handleImg attributes:
  • trackCssClass is the css class that corresponds with the slider tracking line.
  • handleImg is the image that will be render as the handle (the piece that we move along the tracking line)
An example of track css class could be like the following example:
  1.    .track {
    2. 

  2.        background: transparent
    3. 

  3.                    url(track_background_image.png)
    4. 

  4.                    repeat-x
    5. 

  5.                    top left;
    6. 

  6.    }
    7.

Of course, we can change the dimensions of the slider by setting the width and height attribute, as well as the handle dimensions by setting the handleWidth and handleHeight attributes.



See the slider component in action here: http://www.lionframework.org/components/slider.html


Author:  Antonio Parraga Navarro
Version:  1.1.125 beta
Copyright:  Copyright (c) 2008 Antonio Parraga Navarro 
__UIComponent
   |
   --__UIContainer
      |
      --__InputComponent
         |
         --__SliderComponent

Properties

Methods
[ Top ]

Inherited Properties, Constants, and Methods

Class Overview | Inherited Properties, Constants, and Methods | Properties Summary | Properties Detail | Method Summary | Methods Detail | Constants Summary | Constants Detail
Inherited Properties Inherited Methods Inherited Constants

Inherited From __InputComponent

Inherited From __UIContainer

Inherited From __UIComponent

Inherited From __InputComponent

Inherited From __UIContainer

Inherited From __UIComponent

[ Top ]

Constant Summary

Class Overview | Inherited Properties, Constants, and Methods | Properties Summary | Properties Detail | Method Summary | Methods Detail | Constants Summary | Constants Detail
AXIS_HORIZONTAL  
AXIS_VERTICAL  

[ Top ]

Properties Summary

Class Overview | Inherited Properties, Constants, and Methods | Properties Summary | Properties Detail | Method Summary | Methods Detail | Constants Summary | Constants Detail
mixed   $_axis  
mixed   $_decimals  
mixed   $_handle_height  
mixed   $_handle_img  
mixed   $_handle_width  
mixed   $_height  
mixed   $_input_receiver  
mixed   $_left_track_cssclass  
mixed   $_lower_limit  
mixed   $_right_track_cssclass  
mixed   $_track_cssclass  
mixed   $_upper_limit  
mixed   $_value  
mixed   $_width  

[ Top ]

Method Summary

Class Overview | Inherited Properties, Constants, and Methods | Properties Summary | Properties Detail | Method Summary | Methods Detail | Constants Summary | Constants Detail
string   getAxis()   Get the axis in which the slider will be rendered in
integer   getDecimals()   Get the number of decimals to be shown within the input receiver
integer   getHandleHeight()   Get the height of the handle piece
string   getHandleImg()   Get the image of the handle piece
integer   getHandleWidth()   Get the width of the handle piece
integer   getHeight()   Get the height for current component
__LabelComponent|__InputBoxComponent   &getInputReceiver()   Get the component used to show the slider value
string   getLeftTrackCssClass()   Get the css class applied to the left corner of the tracking line
integer|float   getLowerLimit()   Get the lower limit within the numeric range handled by the slider
string   getRightTrackCssClass()   Get the css class applied to the right corner of the tracking line
string   getTrackCssClass()   Get the css class applied to the tracking line
integer|float   getUpperLimit()   Get the upper limit within the numeric range handled by the slider
integer   getWidth()   Get the width for current component
void   setAxis()   Set the axis in which the slider will be rendered in.
void   setDecimals()   Set the number of decimals to be shown within the input receiver (if any).
void   setHandleHeight()   Set a height for the handle piece (the one the user moves)
void   setHandleImg()   Set an image for the handle piece (the one the user moves)
void   setHandleWidth()   Set a width for the handle piece (the one the user moves)
void   setHeight()   Set a height for current component
void   setInputReceiver()   Set the component id to be used to show the slider value The component must be either a __LabelComponent or a __InputBoxComponent.
void   setLeftTrackCssClass()   Set a css class to be applied to the left corner of the tracking line
void   setLowerLimit()   Set the lower limit within the numeric range handled by the slider
void   setRightTrackCssClass()   Set a css class to be applied to the right corner of the tracking line
void   setTrackCssClass()   Set a css class to be applied to the tracking line
void   setUpperLimit()   Set the upper limit within the numeric range handled by the slider
void   setValue()   Set the value of the slider
void   setWidth()   Set a width for current component
void   _updateInputReceiver()  

[ Top ]

Properties

Class Overview | Inherited Properties, Constants, and Methods | Properties Summary | Properties Detail | Method Summary | Methods Detail | Constants Summary | Constants Detail
mixed   $_axis = self::AXIS_HORIZONTAL
Access:  protected


mixed   $_decimals = 0
Access:  protected


mixed   $_handle_height = "15px"
Access:  protected


mixed   $_handle_img = null
Access:  protected


mixed   $_handle_width = "10px"
Access:  protected


mixed   $_height = null
Access:  protected


mixed   $_input_receiver = null
Access:  protected


mixed   $_left_track_cssclass = null
Access:  protected


mixed   $_lower_limit = 0
Access:  protected


mixed   $_right_track_cssclass = null
Access:  protected


mixed   $_track_cssclass = null
Access:  protected


mixed   $_upper_limit = 1
Access:  protected


mixed   $_value = 0
Access:  protected

Redefinition of:
__InputComponent::$_value

mixed   $_width = null
Access:  protected


Methods

Class Overview | Inherited Properties, Constants, and Methods | Properties Summary | Properties Detail | Method Summary | Methods Detail | Constants Summary | Constants Detail

getAxis


  string getAxis( )

Get the axis in which the slider will be rendered in

Access:  public



getDecimals


  integer getDecimals( )

Get the number of decimals to be shown within the input receiver

Access:  public



getHandleHeight


  integer getHandleHeight( )

Get the height of the handle piece

Access:  public



getHandleImg


  string getHandleImg( )

Get the image of the handle piece

Access:  public



getHandleWidth


  integer getHandleWidth( )

Get the width of the handle piece

Access:  public



getHeight


  integer getHeight( )

Get the height for current component

Access:  public



getInputReceiver


  __LabelComponent|__InputBoxComponent &getInputReceiver( )

Get the component used to show the slider value

Access:  public



getLeftTrackCssClass


  string getLeftTrackCssClass( )

Get the css class applied to the left corner of the tracking line

Access:  public



getLowerLimit


  integer|float getLowerLimit( )

Get the lower limit within the numeric range handled by the slider

Access:  public



getRightTrackCssClass


  string getRightTrackCssClass( )

Get the css class applied to the right corner of the tracking line

Access:  public



getTrackCssClass


  string getTrackCssClass( )

Get the css class applied to the tracking line

Access:  public



getUpperLimit


  integer|float getUpperLimit( )

Get the upper limit within the numeric range handled by the slider

Access:  public



getWidth


  integer getWidth( )

Get the width for current component

Access:  public



setAxis


  void setAxis( string $axis  )

Set the axis in which the slider will be rendered in.

This property allow the following values:



Parameters:
TypeNameDescription
string $axis

Access:  public



setDecimals


  void setDecimals( integer $decimals  )

Set the number of decimals to be shown within the input receiver (if any).

By default, the input receiver will round the value without decimals.



Parameters:
TypeNameDescription
integer $decimals

Access:  public



setHandleHeight


  void setHandleHeight( integer $handle_height  )

Set a height for the handle piece (the one the user moves)


Parameters:
TypeNameDescription
integer $handle_height

Access:  public



setHandleImg


  void setHandleImg( string $handle_img  )

Set an image for the handle piece (the one the user moves)


Parameters:
TypeNameDescription
string $handle_img

Access:  public



setHandleWidth


  void setHandleWidth( integer $handle_width  )

Set a width for the handle piece (the one the user moves)


Parameters:
TypeNameDescription
integer $handle_width

Access:  public



setHeight


  void setHeight( integer $height  )

Set a height for current component


Parameters:
TypeNameDescription
integer $height

Access:  public



setInputReceiver


  void setInputReceiver( string $input_receiver  )

Set the component id to be used to show the slider value The component must be either a __LabelComponent or a __InputBoxComponent.


Parameters:
TypeNameDescription
string $input_receiver

Access:  public



setLeftTrackCssClass


  void setLeftTrackCssClass( string $left_track_cssclass  )

Set a css class to be applied to the left corner of the tracking line


Parameters:
TypeNameDescription
string $left_track_cssclass

Access:  public



setLowerLimit


  void setLowerLimit( integer|float $lower_limit  )

Set the lower limit within the numeric range handled by the slider


Parameters:
TypeNameDescription
integer|float $lower_limit

Access:  public



setRightTrackCssClass


  void setRightTrackCssClass( string $right_track_cssclass  )

Set a css class to be applied to the right corner of the tracking line


Parameters:
TypeNameDescription
string $right_track_cssclass

Access:  public



setTrackCssClass


  void setTrackCssClass( string $track_cssclass  )

Set a css class to be applied to the tracking line


Parameters:
TypeNameDescription
string $track_cssclass

Access:  public



setUpperLimit


  void setUpperLimit( integer|float $upper_limit  )

Set the upper limit within the numeric range handled by the slider


Parameters:
TypeNameDescription
integer|float $upper_limit

Access:  public



setValue


  void setValue( integer|float $value  )

Set the value of the slider


Parameters:
TypeNameDescription
integer|float $value

Access:  public

Redefinition of:
__InputComponent::setValue()


setWidth


  void setWidth( integer $width  )

Set a width for current component


Parameters:
TypeNameDescription
integer $width

Access:  public



_updateInputReceiver


  void _updateInputReceiver( )

Access:  protected



Constants

Class Overview | Inherited Properties, Constants, and Methods | Properties Summary | Properties Detail | Method Summary | Methods Detail | Constants Summary | Constants Detail

AXIS_HORIZONTAL =  "horizontal"


[ Top ]

AXIS_VERTICAL =  "vertical"


[ Top ]
Copyright (c) 2008, www.lionframework.org