Slider Text Field

**tomalex0** · 15 Sep 2010 3:34 AM

I have tried to create a slider with number-field associated with it which holds value of slider that can be edited also.
I have mentioned the code below
This can be specified as item in FormPanel also.
Main thing i wanted was to adjust the slider when value of number field is changed and if the value exceeds the maxValue then slider value will be same as the maxValue.

Hope it would come handy for someone.

Extension

Code:

Ext.form.TextfieldSlider = Ext.extend(Ext.Slider, {
  isFormField: true,
  initComponent: function() {
    this.originalValue = this.value;
    Ext.form.TextfieldSlider.superclass.initComponent.call(this);
  },
  onRender: function(){
    Ext.form.TextfieldSlider.superclass.onRender.apply(this, arguments);
    Ext.DomHelper.insertAfter(this.el,{
        tag: 'div',
        id: this.id +'_slidertextdiv',
        style: 'position: relative; float:right;width:60px;height:20px;margin-top:-22px;'
    });
    this.sliderField = new Ext.form.NumberField({
        renderTo:this.id +'_slidertextdiv',
        id: this.id +'_slidertext',
        name: this.name +'_slidertext',
        value: this.value,
        enableKeyEvents:true,
        width:60,
        minValue:this.minValue,
        maxValue:this.maxValue ,
        scope:this,
        listeners: {
            keyup : function() {
                this.adjustValue.defer(500, this);
            },
            scope:this
        }
    });
  },
  adjustValue : function(){
    this.setValue(this.sliderField.getValue());
    if(this.sliderField.getValue()==""){
         this.setValue(this.sliderField.minValue);
    }
    this.sliderField.clearInvalid();
  },
  setValue: function(v) {
    v = parseFloat(v);
    if(this.maxValue && v > this.maxValue) v = this.maxValue;
    if(this.minValue && v < this.minValue) v = this.minValue;
    Ext.form.TextfieldSlider.superclass.setValue.apply(this, [v]);
   
    if(this.rendered){
      if(v<=0){
        Ext.getDom(this.id +'_slidertext').value=0;
      } else {
        Ext.getDom(this.id +'_slidertext').value=v;
      }
      
    }
  },
  reset: function() {
    this.setValue(this.originalValue);
    this.clearInvalid();
  },
  getName: function() {
    return this.name;
  },
  validate: function() {
    return true;
  },
  setMinValue : function(minValue){
    this.minValue = minValue;
    this.sliderField.minValue =  minValue;
    return minValue;
  },
  setMaxValue : function(maxValue){
    this.maxValue = maxValue;
    this.sliderField.maxValue =  maxValue;
    return maxValue
  },
  markInvalid: Ext.emptyFn,
  clearInvalid: Ext.emptyFn
});
Ext.reg('textfieldslider', Ext.form.TextfieldSlider);

Example Code

Code:

{
                    xtype: 'textfieldslider',
                    name: 'slider',
                    minValue: 222,
                    maxValue: 2406,
                    fieldLabel: 'Slider Label',
                    scope:this,
                    listeners:{
                        change:function(slider,value){
                        }
                    }
                }

**kurt971** · 18 Sep 2010 3:08 AM

Hi
I'm new to extjs, and I want to try to use your code , but I dont anderstand where to put your code in my pages... can you help? have you some examples of use for this? for the moment, I just use exemple "slider.html" and it's do the job, but use your extension is not as easy than "slider.html" I think... Where to put extension code? and can I add this to slider.js file?

Code:

    new Ext.Slider({
        renderTo: 'textfieldslider',
        name: 'slider',
        width: 214,
        minValue: 0,
        maxValue: 100
        fieldLabel: 'Slider Label',
        scope:this,
        listeners:{
           change:function(slider,value){
           }
        }
    });

Thank you

**tomalex0** · 19 Sep 2010 9:34 PM

Try this

Code:

<html>
<head>
<title>Text Edit Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript">
Ext.form.TextfieldSlider = Ext.extend(Ext.Slider, {
  isFormField: true,
  initComponent: function() {
    this.originalValue = this.value;
    Ext.form.TextfieldSlider.superclass.initComponent.call(this);
  },
  onRender: function(){
    Ext.form.TextfieldSlider.superclass.onRender.apply(this, arguments);
    Ext.DomHelper.insertAfter(this.el,{
        tag: 'div',
        id: this.id +'_slidertextdiv',
        style: 'position: relative; float:right;width:60px;height:20px;margin-top:-22px;'
    });
    this.sliderField = new Ext.form.NumberField({
        renderTo:this.id +'_slidertextdiv',
        id: this.id +'_slidertext',
        name: this.name +'_slidertext',
        value: this.value,
        enableKeyEvents:true,
        width:60,
        minValue:this.minValue,
        maxValue:this.maxValue ,
        scope:this,
        listeners: {
            keyup : function() {
                this.adjustValue.defer(500, this);
            },
            scope:this
        }
    });
  },
  adjustValue : function(){
    this.setValue(this.sliderField.getValue());
    if(this.sliderField.getValue()==""){
         this.setValue(this.sliderField.minValue);
    }
    this.sliderField.clearInvalid();
  },
  setValue: function(v) {
    v = parseFloat(v);
    if(this.maxValue && v > this.maxValue) v = this.maxValue;
    if(this.minValue && v < this.minValue) v = this.minValue;
    Ext.form.TextfieldSlider.superclass.setValue.apply(this, [v]);
   
    if(this.rendered){
      if(v<=0){
        Ext.getDom(this.id +'_slidertext').value=0;
      } else {
        Ext.getDom(this.id +'_slidertext').value=v;
      }
      
    }
  },
  reset: function() {
    this.setValue(this.originalValue);
    this.clearInvalid();
  },
  getName: function() {
    return this.name;
  },
  validate: function() {
    return true;
  },
  setMinValue : function(minValue){
    this.minValue = minValue;
    this.sliderField.minValue =  minValue;
    return minValue;
  },
  setMaxValue : function(maxValue){
    this.maxValue = maxValue;
    this.sliderField.maxValue =  maxValue;
    return maxValue
  },
  markInvalid: Ext.emptyFn,
  clearInvalid: Ext.emptyFn
});
Ext.reg('textfieldslider', Ext.form.TextfieldSlider);
 

Ext.onReady(function() {
    var labelpanel=new Ext.FormPanel({
        frame: true,
        labelWidth:100,
        height: 250,
        width: 510,
        defaults: {
            xtype: 'textfieldslider',
            vertical: false,
            width: 180,
            minValue: 2,
            maxValue: 100
        },
        items:[{
           name: 'slider',
            id: 'slider',
            minValue: 0,
            maxValue: 100,
            fieldLabel: 'Text Slider',
            value: 25
        }],
        buttons: [{
                text: 'Save',
                handler:function(){
                  alert(Ext.encode(labelpanel.getForm().getValues()));
                }
        }]
    });
    var mainPanel=new Ext.Panel({
        renderTo: document.body,
        items:[labelpanel]
    });
});
</script>
</head>
<body/>
</html>

**ajainvivek** · 8 Nov 2011 3:20 AM

I am stuck with textfield for slider in sencha touch...can u help me out..

Thanks

Slider Text Field

Thread Tools

Search Thread

Display

Slider Text Field

Slider Text Field

Is the textfield possible to do in sencha touch

Is the textfield possible to do in sencha touch

Similar Threads

Extending slider with text fields to accept range

How to use a Slider as a form field

do not select existing text in text field when focus via tab key