LudoJS

ludo.form.Seekbar

ludo.form.

new ludo.form.Seekbar(config)

Seekbar form view.
For live example, see Seekbar demo

Parameters:
Name Type Description
config object
Properties
Name Type Description
value number

Initial value, default 0
orientation number

Orientation of seekbar, "horizontal" or "vertical", default: "vertical"
minValue number

Minimum value, default 0
maxValue number

Maximum value, default 10
negativeColor number

color of seekbar line below(vertical) and left(horizontal mode), default: #888
positiveColor number

color of seekbar line above(vertical) and right of(horizontal mode), default: #CCC
thumbColor number

Color of thumb, default: #888
thumbAlpha number

Alpha(opacity) of thumb in range 0-1 while dragging, default: 1
barSize number

Size(height or width) of bar in pixels, default: 2
needleSize number

Fraction size of of needle(circle inside thumb) relative to thumb size, default: 0.2
increments number

Optional increment value. If you want to disable decimals, set this value to 1
Source:
Fires:
  • event:change Event fired when value is changed.
Example
new ludo.form.Seekbar({
        renderTo:document.body,
        orientation:"vertical",
        layout:{
            width:50, height:300
        },
        id: 'red', // id of view for easy access using ludo.get('red') later
        minValue:0,maxValue:255, // Min value set to 0, max set to 255
        thumbColor:'#D32F2F', // Red color of seekbar thumb
        negativeColor:'#D32F2F', // Same red color on the seekbar(below thumb)
        type: 'form.Seekbar', // Type of view is form.Seekbar
        stateful:true, // value will be saved, i.e. saved
        value:100, // Sets a default red value of 100
        css:{
            'padding-left': 5,'padding-right':5 // some space between the seekbars
        },
        listeners:{
            change:updateColor // call the updateColor function above when red value is changed
        }
    });

Extends

Members

val :function

Function to set or get value

Type:
  • function
Overrides:
Source:
Example
// set value
ludo.get("seekbar").val(100);
// get value
var val = ludo.get("seekbar").val();

Methods

clear()

Reset value back to the original value sent(constructor value)

Inherited From:
Source:

commit()

Update initial value to current value. These actions will always trigger a commit

  • Form or Model submission
  • Fetching new record for a ludo.model.Model
Inherited From:
Source:

disable()

Disable form element

Inherited From:
Source:
Returns:

void

enable()

Enable form element

Inherited From:
Source:
Returns:

void

getFormEl()

Get reference to input element

Inherited From:
Source:
Returns:

DOMElement

isDirty() → {Boolean}

Returns true if current value is different from original value

Inherited From:
Source:
Returns:

isDirty

Type
Boolean

isValid() → {Boolean}

Returns true when value of form element is valid, i.e. larger than minValue, matching regex etc.

Inherited From:
Source:
Returns:

valid

Type
Boolean

reset()

Reset / Roll back to last committed value. It could be the value stored by last commit method call
or if the original value/default value of this field.

Inherited From:
Source:
Returns:

void

rollback()

Alias to reset

Inherited From:
Source:

setEnabled(enabled)

Enable or disable form element

Parameters:
Name Type Description
enabled Boolean
Inherited From:
Source: