View Full Version : slider with a value field

13 Jun 2011, 5:11 PM
I'm attempting to extend the built in sencha touch slider with one that displays an editable value.

In the code below, I've simply added an <input> in the slider's template with some listeners to keep the thumb and the <input>'s values in sync. It seems to work fine in chrome(desktop) and IPAD, however on the android browser, I'm unable to clear the <input> field using the backspace key.

Ext.ux.Slider = Ext.extend(Ext.form.Slider, {
sliderfieldstyle: "width: 39px; " +
"padding: 0px 0px 0px 2px; ",

renderTpl: [
'<tpl if="label">',
'<div class="x-form-label"><span>{label}</span></div>',
'<tpl if="fieldEl">',
'<input type=text type=number id={valdisp} style="{sliderfieldcls}" value="">',
'<div id="{inputId}" name="{name}" class="{fieldCls}"',
'<tpl if="tabIndex">tabIndex="{tabIndex}"</tpl>',
'<tpl if="style">style="{style}" </tpl>',
constructor: function(config) {
Ext.ux.Slider.superclass.constructor.call(this, config)
initRenderData: function() {
Ext.ux.Slider.superclass.initRenderData.apply(this, arguments)
Ext.applyIf(this.renderData, {
valdisp: this.renderData.inputId + '-uslider',
sliderfieldcls: this.sliderfieldstyle
return this.renderData;

afterRender: function() {
this.slidval = Ext.select('input', this.el.dom).elements[0]
var me = this;
this.slidval.value = this.getValue();

//register for field updates
this.slidval.onchange = function(val) {
//console.log("Setting slider field value: " + val.srcElement.value)

//register for slider updates
this.on('change', function (slider, thumb, newValue, oldValue) {
this.on('drag', function(slider, thumb, newValue) {

Ext.ux.Slider.superclass.afterRender.call(this, arguments);

setSliderFieldValue: function(constrainedVal) {
if(this.slidval != null && this.slidval.value != constrainedVal)
//console.log("+++ " + constrainedVal);
this.slidval.value = constrainedVal;


Appreciate any help