Sliding values using a Slider field

1. We start by instantiating the Ext.slider.Single class, a subclass of
Ext.slider.Multi, and giving it a width, a label, and rendering it to the
body of our document:
Ext.create('Ext.slider.Single', {
fieldLabel: 'Maximum Price',
width: 400,
renderTo: Ext.getBody()
});

2. We now provide the field with a default value and some constraints as to what
value can be chosen. This is done by using the value, minValue, and maxValue
configuration options respectively:
Ext.create('Ext.slider.Single', {
fieldLabel: 'Maximum Price',
value: 100,
minValue: 0,
maxValue: 500,
width: 400,
renderTo: Ext.getBody()
});

3. Finally, we restrict the user even further by configuring an increment value that
specifies by how much the slider's value changes as the thumb is dragged:
Ext.create('Ext.slider.Single', {
fieldLabel: 'Maximum Price',
value: 100,
minValue: 0,
maxValue: 500,
increment: 10,
width: 400,
renderTo: Ext.getBody()
});