---
title: "Slider Field in Sencha Touch"  
description: "In this article, I’m explaining the slider field in sencha touch and how to use it our application."  
author: "Sumit Kesarwani"  
published: 2013-06-21  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1346/slider-field-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 4 minutes  

---

# Slider Field in Sencha Touch

In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370), I’m explaining the slider field in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme) and how to use it our application.\

The slider is a way to allow the user to [select](https://www.mindstick.com/forum/34066/use-select-operator-in-linq) a value from a given numerical range. You might use it for choosing a percentage, [combine two](https://www.mindstick.com/forum/160711/how-to-combine-two-arrays-without-duplicate-values-in-c-sharp) of them to get min and max [values](https://www.mindstick.com/forum/159360/how-to-write-sql-query-to-join-comma-separated-values), or use three of them to specify the hex values for a color. Each slider contains a single 'thumb' that can be dragged along the slider's [length](https://www.mindstick.com/interview/1915/what-is-the-difference-between-char_length-and-length) to change the value. Sliders are equally [useful](https://www.mindstick.com/articles/12694/how-dolomite-mineral-is-useful-in-human-life) inside forms and standalone.

##### Example

```
Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',
 
    config: {
        fullscreen: true,
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                id: 'SliderValueToolbar',
                title: 'value=[25,75]'
            },
            {
                xtype: 'fieldset',
                title: '',
                items: [
                    {
                        xtype: 'checkboxfield',
                        id: 'OverlappingCkeckBox',
                        itemId: 'mycheckbox',
                        label: 'Allow Thumb OverLapping :',
                        checked: true
                    },
                    {
                        xtype: 'sliderfield',
                        id: 'SliderField',
                        itemId: 'mysliderfield',
                        component: {
                            allowThumbsOverlapping: true
                        },
                        label: 'Slider Field',
                        value: [
                            25,
                            75
                        ]
                    }
                ]
            }
        ],
        listeners: [
            {
                fn: 'onOverlappingCkeckBoxCheck',
                event: 'check',
                delegate: '#OverlappingCkeckBox'
            },
            {
                fn: 'onOverlappingCkeckBoxUncheck',
                event: 'uncheck',
                delegate: '#OverlappingCkeckBox'
            },
            {
                fn: 'onSliderFieldChange',
                event: 'change',
                delegate: '#SliderField'
            }
        ]
    },
 
    onOverlappingCkeckBoxCheck: function(checkboxfield, e, eOpts) {
        Ext.getCmp('SliderField').getComponent().setAllowThumbsOverlapping(true);
    },
 
    onOverlappingCkeckBoxUncheck: function(checkboxfield, e, eOpts) {
        Ext.getCmp('SliderField').getComponent().setAllowThumbsOverlapping(false);
    },
 
    onSliderFieldChange: function(me, sl, thumb, newValue, oldValue, eOpts) {
        var slider= Ext.getCmp('SliderField');
        Ext.getCmp('SliderValueToolbar').setTitle('values = [' + slider.getValues() + ']');
    }
});
```

[Output](https://www.mindstick.com/interview/34427/explain-the-output-in-angular)

![Slider Field in Sencha Touch](https://www.mindstick.com/mindstickarticle/45357e10-b8c2-4214-9fe6-3d1ec28c8699/images/d84a7a92-91f0-48cd-aaa7-e01fd2dd4d29.png)

When you change the location of thumbs, the value change in the title of toolbar:

![Slider Field in Sencha Touch](https://www.mindstick.com/mindstickarticle/45357e10-b8c2-4214-9fe6-3d1ec28c8699/images/39f192f8-3300-4167-b276-4a2b27b4e76b.png)

Unchecking the Allow Thumb OverLapping [checkbox](https://www.mindstick.com/articles/291/how-should-use-checkbox-control-in-vb-dot-net) will not allow the thumbs to overlap:

![Slider Field in Sencha Touch](https://www.mindstick.com/mindstickarticle/45357e10-b8c2-4214-9fe6-3d1ec28c8699/images/e350f56f-5272-411d-a60a-a31942b4626c.png)

Checking the Allow Thumb OverLapping checkbox will allow the thumbs to overlap:

![Slider Field in Sencha Touch](https://www.mindstick.com/mindstickarticle/45357e10-b8c2-4214-9fe6-3d1ec28c8699/images/d9589189-099d-484a-98de-5d6f3a64d60d.png)

---

Original Source: https://www.mindstick.com/articles/1346/slider-field-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.