/**
 * The slider is a way to allow the user to select a value from a given numerical range. You might use it for choosing
 */
Ext.define('Ext.field.SingleSlider', {
    extend  : 'Ext.field.Slider',
    xtype   : 'singlesliderfield',
 
    /**
     * @event dragchange
     * Fires when the value changes.
     * @param {Ext.field.Slider} me 
     * @param {Number} newValue The new value.
     * @param {Number} oldValue The old value.
     */
 
    /**
     * @event dragchange
     * Fires when the value changes via drag.
     * @param {Ext.field.Slider} me 
     * @param {Ext.slider.Slider} sl Slider Component.
     * @param {Number} newValue The new value.
     * @param {Number} oldValue The old value.
     */
 
    /**
    * @event dragstart
    * Fires when the slider thumb starts a drag operation.
    * @param {Ext.field.Slider} this 
    * @param {Ext.slider.Slider} sl Slider Component.
    * @param {Ext.slider.Thumb} thumb The thumb being dragged.
    * @param {Array} value The start value.
    * @param {Ext.event.Event} e 
    */
 
    /**
    * @event drag
    * Fires when the slider thumb starts a drag operation.
    * @param {Ext.field.Slider} this 
    * @param {Ext.slider.Slider} sl Slider Component.
    * @param {Ext.slider.Thumb} thumb The thumb being dragged.
    * @param {Ext.event.Event} e 
    */
 
    /**
    * @event dragend
    * Fires when the slider thumb ends a drag operation.
    * @param {Ext.field.Slider} this 
    * @param {Ext.slider.Slider} sl Slider Component.
    * @param {Ext.slider.Thumb} thumb The thumb being dragged.
    * @param {Array} value The end value.
    * @param {Ext.event.Event} e 
    */
   
    /**
     * @inheritdoc Ext.slider.Slider#value
     * @cfg {Number} value
     * @accessor
     */
   
    defaultBindProperty: 'value',
 
    publishes: {
        value: 1
    },
 
    initialize: function() {
        this.callParent();
        this.publishState('value', this.getValue());
    },  
 
    applyValue: function(value, oldValue) {
        value = this.callParent([value, oldValue]);
        if (value && Ext.isArray(value)) {
            value = value[0];
        }
        return value;
    },
 
    getValue: function() {
        var value = this.callParent();
        if (value && Ext.isArray(value)) {
            value = value[0];
        }
        return value;
    },
 
    onSliderChange: function(slider, thumb, newValue, oldValue) {
        this.setValue(newValue);
        this.fireEvent('dragchange', this, slider, newValue, oldValue);
    },
 
    onSliderDragStart: function(slider, thumb, startValue, e) {
        this.fireEvent('dragstart', this, slider, startValue, e);
    },
 
    onSliderDrag: function(slider, thumb, value, e) {
        var me = this;
        if (me.getLiveUpdate()) {
            me.setValue(value);
        }
        me.fireEvent('drag', me, slider, value, e);
    },
 
    onSliderDragEnd: function(slider, thumb, startValue, e) {
        this.fireEvent('dragend', this, slider, startValue, e);
    }
});