/**
 * @class Ext.field.Slider
 * @extend Ext.field.Field
 * @xtype sliderfield
 *
 * The slider is a way to allow the user to select a value from a given numerical range. You might use it for choosing
 * a percentage, combine two of them to get min and max values, or use three of them to specify the hex values for a
 * color. Each slider contains a single 'thumb' that can be dragged along the slider's length to change the value.
 * Sliders are equally useful inside {@link Ext.form.Panel forms} and standalone. Here's how to quickly create a
 * slider in form, in this case enabling a user to choose a percentage:
 *
 *     @example
 *     import React, { Component } from 'react';
 *     import { Container, FormPanel, SliderField } from '@extjs/ext-react';
 *
 *     export default class SliderFieldExample extends Component {
 *
 *         state = {
 *             singleValue: 20,
 *             multipleValue: [10, 70]
 *         };
 *
 *         onSingleChange = (field, value) => {
 *             this.setState({ singleValue: value });
 *         }
 *
 *         onMultipleChange = (field, value) => {
 *             this.setState({ multipleValue: value });
 *         }
 *
 *         render() {
 *             const { singleValue, multipleValue } = this.state;
 *
 *             return (
 *                 <Container layout="center">
 *                     <FormPanel shadow width="300">
 *                         <SliderField
 *                             onChange={this.onSingleChange}
 *                             label="Single Thumb"
 *                             value={singleValue}
 *                         />
 *                         <div style={{marginBottom: '20px'}}>Value: {singleValue}</div>
 *                         <SliderField
 *                             onChange={this.onMultipleChange}
 *                             label="Multiple Thumbs"
 *                             values={multipleValue}
 *                         />
 *                         <div>Values: {multipleValue.join(', ')}</div>
 *                     </FormPanel>
 *                 </Container>
 *             )
 *         }
 *
 *     }
 *
 */
 
/**
 * @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 a thumb value changes via drag.
 * @param {Ext.field.Slider} me
 * @param {Ext.slider.Slider} sl Slider Component.
 * @param {Ext.slider.Thumb} thumb
 * @param {Number[]} newValue The new value of this thumb.
 * @param {Number[]} oldValue The old value of this thumb.
 */
 
/**
 * @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#values
 * @cfg {Number/Number[]} values
 */
 
/**
 * @method setValues
 * Convenience method. Calls {@link #setValue}.
 * @param {Object} value 
 */
 
/**
 * @method getValues
 * Convenience method. Calls {@link #getValue}
 * @return {Object}
 */
 
/**
 * @cfg {Boolean} [liveUpdate=false]
 * `true` to fire change events while the slider is dragging. `false` will
 * only fire a change once the drag is complete.
 * @accessor
 */
 
/**
 * @cfg {Number} [tabIndex=-1]
 * @inheritdoc
 * @accessor
 */
 
/**
 * @cfg {Boolean} [readOnly=false]
 * Will make this field read only, meaning it cannot be changed with used interaction.
 * @accessor
 */
 
/**
 * @cfg {Number/Number[]} [value=0]
 * @inheritdoc Ext.slider.Slider#value
 * @accessor
 */
 
/**
 * @cfg {Number} [increment=1]
 * @inheritdoc Ext.slider.Slider#increment
 * @accessor
 */
 
/**
 * @cfg {Number} [minValue=0]
 * @inheritdoc Ext.slider.Slider#minValue
 *
 * @accessor
 */
 
/**
 * @cfg {Number} [maxValue=100]
 * @inheritdoc Ext.slider.Slider#maxValue
 * @accessor
 */