O'Reilly logo

Ext JS 4 Web Application Development Cookbook by Stuart Ashworth, Andrew Duncan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Sliding values using a Slider field

Ext JS Ext.slider package provides a simple way for allowing users to enter numeric values and value ranges. This recipe will look at configuring this component to allow single and multiple values, as well as demonstrating how we can react to a user changing these values.

How to do it...

  1. We start by instantiating the Ext.slider.Single class, a subclass of Ext.slider.Multi, and giving it a width, a label, and rendering it to the body of our document:
    Ext.create('Ext.slider.Single', {
        fieldLabel: 'Maximum Price',
    
        width: 400,
        renderTo: Ext.getBody()
    });
  2. We now provide the field with a default value and some constraints as to what value can be chosen. This is done by using the value, minValue, and maxValue configuration ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required