SAPUI5 How to realize a Threshold-Slider (like in WebDynpro) - css

Question

I am currently facing the challenge to realize a Slider in SAPUI5 exactly like the Threshold-Slider from Webdynpro, which looks like this.
How would you do this? It is highly dynamic, the scale (can be 5 values, can be 3 values etc), the descriptions are depending on the scale value ...
Currently I only find Slider in API, but I doubt this is realizable with it ... any ideas?
18.06.2015: currently I am working on extending the sap.ui.commons.Slider, what I got right now is far away from what I try to achieve:
When clicking on slider, Change Background Color via renderer (each value should have another Color
Textfield on the right-hand side and a link on the left side (optional parts, coloring is more important)
What i got...
sap.ui.commons.Slider.extend("my.Slider", {
renderer : {
renderInnerAttributes : function(oRm, oControl) {
console.log(oRm); // try to find out, what I re-style
console.log(oControl); // try to find out, what I re-style
oRm.addStyle('background-color', '#ffff00'); // no effect
},
}
});
var oSlider6 = new my.Slider({
id : 'Slider6',
tooltip : 'Slider6',
width : '500px',
min : 1,
max : 4,
value : 0,
totalUnits : 4,
smallStepWidth : 1,
stepLabels : true,
labels : [
"Bad", "Medium", "Good", "Very Good"
]
});
return oSlider6;

Answer 1

I think the easiest way to achieve this is to either copy the sap.m.Slider and modify it or to inherit from sap.m.Slider with the UI5 extend mechanism and overstyle it. Or you could extend the sap.m.ProgressIndicator and make it interactive but that would be a bit more work.
All the basic functionality is already there in the slider (scale, number of values, ...) and you can easily modify the background color and the styling of the handle. A link a textual value can be added with a label control next to it.
Check this youtube video on custom controls for more details on how to use the extension mechanism of UI5:
https://www.youtube.com/watch?v=4KPS2-LHoO0
Hope that helps,
Michael

Answer 2

you could also choose a d3js control. Either way would take some changes. You can add a style in the xml view. By adding css in your css file you could make them visually the same as your desired controls. The slider has min, max and step by default.
In the change event you could add or remove style classes (addStyleClass/removeStyleClass) to show different colors.
The text you could show seperately and handle with formatters.
If you want it all in one control, you should review this page.