Skip to content

Instantly share code, notes, and snippets.

@vote539

vote539/UpdatingSlider.js

Last active Dec 20, 2015
Embed
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:
myUpdatingSlider.down("#UpdatingSliderField").setValue(startValue);
myUpdatingSlider.down("#UpdatingSliderLabel").setHtml(startValue);
Sample CSS:
.slider-label{
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: [
2
],
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) {
me.up("#UpdatingSlider").down("#UpdatingSliderLabel").setHtml(newValue);
},
onUpdatingSliderFieldDrag: function(sliderfield, sl, thumb, e, eOpts) {
var slider = sliderfield.getComponent();
var index = slider.getThumbIndex(thumb);
var newValue = slider.getValue()[index];
sliderfield.up("#UpdatingSlider").down("#UpdatingSliderLabel").setHtml(newValue);
}
});
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.