/**
 * 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',
 
    /**
     * @cfg twoWayBindable
     * @inheritdoc
     */
    twoWayBindable: {
        value: 1
    },
 
    /**
     * @event change
     * 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 
    */
   
    /**
     * @cfg value
     * @inheritdoc Ext.slider.Slider#cfg-value
     * @accessor
     */
   
    /**
     * @property defaultBindProperty
     * @inheritdoc
     */
    defaultBindProperty: 'value',
 
    /**
     * @cfg publishes
     * @inheritdoc
     */
    publishes: {
        value: 1
    },
 
    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);
    }
});