5

I am using ExtJS 3.3 but this might be relevant to other versions as well.

I am using a Slider control in an ExtJS-based UI. I have a tooltip set up to show the value as you drag it, as per the "Slider with Tip" example here: http://dev.sencha.com/deploy/ext-3.3.1/examples/slider/slider.html

It seems to me to be quite poor UX to have a slider with no indication of what the values are (or in this case not until you start sliding it). I would like to add labels to either end to show the range the slider is representing. Something like this:
Example of possible Slider labels

So, of course, I'm wondering: Is this possible with the standard control itself? (I looked in the docs, but nothing jumped out at me)? or is there a neat way of achieving this?

David
  • 1,940
  • 3
  • 17
  • 30
  • I don't think that this comes out of the box, but you could create it as a slider extension without to much trouble. – AMember May 05 '12 at 13:48

1 Answers1

3

Here is I went about to do it:

var tip = new Ext.slider.Tip({
        getThumbText: this.getThumbText,
        getText: function (thumb) {
            return '<b>' + this.getThumbText(thumb.value) + '<b>';
        }
    });

this.timeSliderLabel = new Ext.form.Label({
        text: Nipendo.Localization.HistorySlider + ': ',
        style: 'margin:3px 5px 0px 5px;'
    });

this.timeSlider = new Ext.Slider({
        width: 214,
        value: 1,
        increment: 1,
        minValue: 1,
        maxValue: 13,
        plugins: tip
    });

    this.timeSlider.on('change', function (slider, newValue, thumb) {
        this.timeSliderHintLabel.setText(this.getThumbText(thumb.value), false);
        this.onSearchClick();
    }, this);

    this.timeSliderHintLabel = new Ext.form.Label({
        html: String.format('(1 {0})', Nipendo.Localization.OneMonthBack),
        style: 'margin:3px 5px 0px 5px;'
    });

UPDATE:

The layout could be used like this:

 config = config.apply({
     layout: 'column',
     defaults: {
         layout: 'form'
     },
     items: [
         this.timeSliderLabel,
            this.timeSlider,
            this.timeSliderHintLabel
     ]
 }, config)

Where getThumbText is a helper method I use to get the correct label value.

AMember
  • 3,037
  • 2
  • 33
  • 64
  • Thanks for your answer, sorry about my slow reply (been on another project). Unfortunately I don't think your solution gives me what I am after. I want to have 2 static pieces of text, one at each end of the slider indicating to the user what the range of possible values is. This should be independent of the field label and the tooltip that pops up at any stage. It seems to me that your code makes the label of the field change as the slider value is changed. – David May 24 '12 at 01:55
  • that is correct but it could just as well be static by removing the change event and preventing the test set... – AMember May 24 '12 at 06:49
  • It might be that I didn't implement your code correctly, where do you use this.timeSliderLabel and this.timeSliderHintLabel? (it's not shown in your answer). – David May 24 '12 at 07:00
  • I have added a layout example. just create a column layout and insert the labels on either side of the slider. You could also just wrap it as a single control... – AMember May 24 '12 at 07:24