Skip to content

Instantly share code, notes, and snippets.



Last active Dec 20, 2015
What would you like to do?
A Sencha Touch slider that displays the current value in a text field, updating automatically when the slider is moved/dragged/changed.
Do the following when you make your slider:
Sample CSS:
font-size: 2em;
text-align: center;
line-height: 62px;
vertical-align: middle;
Ext.define('App.view.UpdatingSlider', {
extend: 'Ext.form.Panel',
alias: 'widget.rangegrade',
config: {
itemId: 'UpdatingSlider',
items: [
xtype: 'fieldset',
layout: {
type: 'hbox'
instructions: 'Description Goes Here',
title: 'Field Title',
items: [
xtype: 'sliderfield',
flex: 17,
itemId: 'UpdatingSliderField',
name: 'integer_value',
value: [
maxValue: 10
xtype: 'label',
flex: 3,
cls: 'slider-label',
html: '2',
itemId: 'UpdatingSliderLabel'
listeners: [
fn: 'onUpdatingSliderFieldChange',
event: 'change',
delegate: '#UpdatingSliderField'
fn: 'onUpdatingSliderFieldDrag',
event: 'drag',
delegate: '#UpdatingSliderField'
onUpdatingSliderFieldChange: function(me, sl, thumb, newValue, oldValue, eOpts) {
onUpdatingSliderFieldDrag: function(sliderfield, sl, thumb, e, eOpts) {
var slider = sliderfield.getComponent();
var index = slider.getThumbIndex(thumb);
var newValue = slider.getValue()[index];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.