A Sencha Touch slider that displays the current value in a text field, updating automatically when the slider is moved/dragged/changed.

UpdatingSlider.js

/*
Do the following when you make your slider:

myUpdatingSlider.down("#UpdatingSliderField").setValue(startValue);
myUpdatingSlider.down("#UpdatingSliderLabel").setHtml(startValue);

Sample CSS:

.slider-label{
	font-size: 2em;
	text-align: center;
	line-height: 62px;
	vertical-align: middle;
}
*/
Ext.define('App.view.UpdatingSlider', {
	extend: 'Ext.form.Panel',
	alias: 'widget.rangegrade',

	config: {
		itemId: 'UpdatingSlider',
		items: [
			{
				xtype: 'fieldset',
				layout: {
					type: 'hbox'
				},
				instructions: 'Description Goes Here',
				title: 'Field Title',
				items: [
					{
						xtype: 'sliderfield',
						flex: 17,
						itemId: 'UpdatingSliderField',
						name: 'integer_value',
						value: [
							2
						],
						maxValue: 10
					},
					{
						xtype: 'label',
						flex: 3,
						cls: 'slider-label',
						html: '2',
						itemId: 'UpdatingSliderLabel'
					}
				]
			}
		],
		listeners: [
			{
				fn: 'onUpdatingSliderFieldChange',
				event: 'change',
				delegate: '#UpdatingSliderField'
			},
			{
				fn: 'onUpdatingSliderFieldDrag',
				event: 'drag',
				delegate: '#UpdatingSliderField'
			}
		]
	},

	onUpdatingSliderFieldChange: function(me, sl, thumb, newValue, oldValue, eOpts) {
		me.up("#UpdatingSlider").down("#UpdatingSliderLabel").setHtml(newValue);
	},

	onUpdatingSliderFieldDrag: function(sliderfield, sl, thumb, e, eOpts) {
		var slider = sliderfield.getComponent();
		var index = slider.getThumbIndex(thumb);
		var newValue = slider.getValue()[index];
		sliderfield.up("#UpdatingSlider").down("#UpdatingSliderLabel").setHtml(newValue);
	}

});