View Full Version : Slider as a form element

18 Feb 2010, 10:16 AM
Since a slider isn't a form element it doesn't submit it's value when it's used in a form. Apparently if you set isFormField: true or maybe config: { isFormField: true } (not sure which) it does something to make it work but I couldn't get it working without overriding the slider like below and creating a hidden form field. Any ideas? Also, unless you change the slider value, the original value won't get put into the hidden form element. How can I fix that? I could put value: 3 in the onrender function but I want to pull it from the slider init

Or is there a way to do it without overriding the slider? I read something about setting isFormField: true in the slider's config?

Ext.form.SliderField = Ext.extend(Ext.Slider, {
isFormField: true,
initComponent: function() {
this.originalValue = this.value;
onRender: function(){
Ext.form.SliderField.superclass.onRender.apply(this, arguments);
this.hiddenEl = this.el.createChild({
tag: 'input', type: 'hidden', name: this.name || this.id
setValue: function(v) {
v = parseInt(v);
if(this.maxValue && v > this.maxValue) v = this.maxValue;
if(this.minValue && v < this.minValue) v = this.minValue;
Ext.form.SliderField.superclass.setValue.apply(this, [v]);
this.hiddenEl.dom.value = v;
reset: function() {
getName: function() {
return this.name;
validate: function() {
return true;
markInvalid: Ext.emptyFn,
clearInvalid: Ext.emptyFn
Ext.reg('sliderfield', Ext.form.SliderField);

xtype: 'sliderfield',
name: 'q1',
increment: 1,
value: 3,
minValue: 1,
maxValue: 5

23 Mar 2010, 3:01 PM
Noticed this as well, will try your code out.

23 Mar 2010, 4:19 PM
Maybe you missed the example? It's simple: