Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Display slider value

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    4

    Default Display slider value

    Hi there,

    I am new to Sencha. I have started building a simple form application with Sencha 2.0. Among the widgets on this form is a slider whose values ranges from 0 - 8. I would like to display the value to the user on the screen (adjacent to the slider or on top). If user selects 0 then I'd like to show the text "Any" and when user select any other number then I'd like to show the corresponding number (1-8). I am curious how to go about implementing this functionality.

    Below is the code I have written so far. Thanks in advance for your help.

    Code:
    Ext.define('App.view.Viewport', {
        extend: 'Ext.Panel',
        
        config: {
            items: [
            {
                title: 'App',
                docked: 'top',
                xtype: 'toolbar'
            },
            {
                title: 'Search',
                xtype: 'fieldset',
                    
                items: [
                    {
                        xtype      : 'searchfield',
                        name       : 'query'                        
                    }]
            },
            {
                    
                xtype      : 'datepickerfield',
                name       : 'date',
                label       : 'Date',
                value       : new Date(),
                piker       : { yearFrom: 2012 }
            },
            {
                xtype: 'sliderfield',
                label: 'Time',
                value: 0,
                minValue: 0,
                maxValue: 8
            }
           ]
        }
        
    });
    
    
    
    
    Ext.application({
       name: "App",
       views: ["Viewport"],
       
       launch: function () {
          var Viewport = Ext.create("App.view.Viewport");
          Ext.Viewport.add(Viewport);
          }
    });

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    Do you mean have like a floating component that shows the value as you slide the value or just have a component above it to always show the value?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    4

    Default

    I'd like to create a box on the left side of the slider, similar to the one that comes by default with Jquery mobile. See: http://jquerymobile.com/demos/1.0a4....ms-slider.html

    Thanks!
    -Kijana

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    Ok, so you can have a container that uses hbox layout. In there you would have a numberfield and the slider field. Then you need to sync the two together so that when the sliderfield changes, it changes the value in the numberfield and vice versa.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    33
    Answers
    2

    Default

    Let us know when you made progress! I would be interested too.

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    4

    Default

    Ok, I've created a container with hbox layout, added the numberfield and sliderfiled, positioned the numberfield such that its immediately after the label "Time:" - see code snippet below. I am struggling to figure out how I can obtain the slider value in the numberfield. Can you please provide a sample code to do this?

    Code:
    {
                layout: 'hbox',
                defaults: { flex: 1},
                items: [
                    {
                        xtype: 'sliderfield',
                        label: 'Time:',
                        value: 0,
                        minValue: 0,
                        maxValue: 8,
                    },
                    {
                        xtype: 'numberfield',
                        value: 0, // How do I get the value from the sliderfield here??
                        left: 50
                    }
                ]
            }

  7. #7
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Answers
    1

    Default

    Slider field have change event or something similar to chat, inside the change event update the number field value

    Somwhat looks like this

    Code:
    {
                layout: 'hbox',
                defaults: { flex: 1},
                items: [
                    {
                        xtype: 'sliderfield',
                        label: 'Time:',
                        value: 0,
                        minValue: 0,
                        maxValue: 8,
                        listeners :{
                              change : function(select,thumb,newval,oldval){
                                    Ext.getCmp("slidervalue").setValue(newval);
                              }
                        }
                    },
                    {
                        xtype: 'numberfield',
                        id :'slidervalue',
                        value: 0, // How do I get the value from the sliderfield here??
                        left: 50
                    }
                ]
            }
    Sencha Touch Demos

    IosToggleField Forum - Github
    Form Validation
    Forum - Github
    Iphone Settings Menu
    Forum
    Sqlite Storage & Login Manifest
    Forum
    KitchenSink MVC
    Forum - Github
    SqliteProxy-v1 Forum - Github
    SqliteProxy-v2
    Forum - Github
    Arshaw Fullcalendar Forum - Github






  8. #8
    Sencha Premium User
    Join Date
    Mar 2007
    Location
    Norway
    Posts
    197
    Answers
    7

    Default

    The change-event only fires AFTER the slide is completed. On mobile-devices it is a lot more userfriendly to show the updated value while the sliding happens. To accomplish this I had to do some overriding/hacking and make the "slide"-event available on the sliderfield.

    Code:
    Ext.define('Sliderhack',{
    	extend: 'Ext.field.Slider',
    	alias: 'widget.sliderhack',
    	
    	initialize: function() {
            this.callParent();
            this.getComponent().on({
                scope: this,
                change: 'onSliderChange',
    	    drag: 'onSliderChange'
            });
        },
    	
    	// @private
            // I only did this override to be able to set allowThumbsOverlapping. It is really ugly and there probably is a better way, but lazyness won this time.
        applyComponent: function(config) {
            return Ext.factory(Ext.apply(config,{    
    			allowThumbsOverlapping: true}), Ext.slider.Slider);
        }
    });
    Which would enable the following:

    Code:
    {
     xtype: 'sliderhack',
     listeners: { change: function(f){ console.log(f.getValue()) } }
    }
    And the listener would fire as the sliding happens in addition to when the sliding is completed.

    I know I saw some post some time back about the "drag"-event being added to the Ext.field.Slider in some release.
    Last edited by bone; 1 Mar 2012 at 1:31 AM. Reason: comments
    Founder of the Path of Exticism

  9. #9
    Sencha User
    Join Date
    Feb 2012
    Posts
    4

    Default

    Thanks guys!. I am able to display the value on console. .. a silly question, how do I display the value on the form adjacent to the slider bar (in the box with xtype numberfield) ? Looking for an equivalent of document.write() ...

  10. #10
    Sencha Premium Member
    Join Date
    Feb 2013
    Location
    Yorkshire, UK
    Posts
    63
    Answers
    4

    Default

    Here's something that can be extended further (e.g. alignment / layout, for me it was a case of YAGNI), posted for usefulness:
    Code:
    Ext.define('ui.forms.VisibleValueSlider', {
        extend: 'Ext.Container',
        layout: {
            type: 'hbox'
        },
        slider: undefined,
        valueBox: undefined,
        config: {
            sliderConfig: {},
            valueComponentConfig: {}
        },
        initComponent: function () {
            this.callParent();
            this.getSliderConfig().useTips = false;
            this.slider = Ext.create('Ext.slider.Single', this.getSliderConfig());
            this.add(this.slider);
            this.slider.on({
                change: this.onSliderChange, 
                scope: this
            });
    
    
            if (!this.getValueComponentConfig().cls) this.getValueComponentConfig().cls = 'slider-value';
            this.valueBox = Ext.create('Ext.Component', this.getValueComponentConfig());
            this.add(this.valueBox);
    
    
    
    
        },
        onSliderChange: function () {
            this.valueBox.update(this.slider.getValue().toString());
        }
    });

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •