PDA

View Full Version : Slider : Color between thumbs



extjs_Beginner
18 Oct 2015, 11:34 PM
Hi,

is it possible to change color between thumbs in a slider just like this : 53433

I have already a horizontal slider but I cant have a color between thumbs

thanks.

tristan.lee
20 Oct 2015, 12:49 PM
I don't see that this is available within the framework, but here's an example to get you started.

vpd

extjs_Beginner
22 Oct 2015, 12:35 AM
thanks. Its a very good example for me. do you have any idea if its possible to have a graduated slider dynamicallay

tristan.lee
22 Oct 2015, 1:06 PM
I'm not sure I understand the question. Can you point me to an example?

extjs_Beginner
22 Oct 2015, 11:27 PM
I mean a slider with a scale like this 53489

My goal is to achieve a slider like this one

Thanks

tristan.lee
1 Nov 2015, 8:13 AM
Just like the highlight I added in the previous example, it's not part of the slider and would need to be implemented yourself.

extjs_Beginner
2 Nov 2015, 5:04 AM
This is what I have done
thanks

_PASCAL_
4 Feb 2017, 8:40 AM
Here's a minor improvement for dynamic ranges and a fix to the z-index, because overlapped thumbs could not be separated anymore in some situations.



Ext.define('InvoiceManager.view.component.MultiHighlight', {
extend: 'Ext.slider.Multi',
alias: 'widget.multihighlight',


setHighlightMargins: function () {


var values = this.getValue();
var range = (this.maxValue || 100) - (this.minValue || 0);


var position1 = Math.abs((this.minValue || 0) - values[0]);
var position2 = range - Math.abs((this.minValue || 0) - values[values.length - 1]);


var percent1 = position1 > 0 ? 100.0 / range * position1 : 0;
var percent2 = position2 > 0 ? 100.0 / range * position2 : 0;


// set the margins of the highlight based on the first and last value
this.highlightEl.setStyle({
marginLeft: percent1 + '%',
marginRight: percent2 + '%'
});


},


listeners: {
render: function (slider) {
var innerEl = slider.getEl().down('.x-slider-inner');


// append a new element used for highlighting
slider.highlightEl = innerEl.appendChild({
tag: 'div',
cls: 'slider-highlightEl',
style: {
backgroundColor: 'gray',
position: 'relative',
height: '6px',
top: '7px'
}
});


this.setHighlightMargins();


this.highlightEl.parent().select('.x-slider-thumb').setStyle('z-index', 10000);


},
change: function () {
this.setHighlightMargins();
}
}

});